مجموعهای کامل از کدها، نمونهها و منابع آموزشی برای توسعه سه بعدی
این ربات سه بعدی نمونهای از قدرت تکنولوژیهایی است که در کدهای زیر استفاده شدهاند
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight,0.1,1000);
const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({color:0x00ff00});
const cube = new THREE.Mesh(geometry,material);
scene.add(cube);
camera.position.z = 5;
function animate(){
requestAnimationFrame(animate);
cube.rotation.x+=0.01;cube.rotation.y+=0.01;
renderer.render(scene,camera);
}
animate();const ambientLight = new THREE.AmbientLight(0x404040,0.5);
const directionalLight = new THREE.DirectionalLight(0xffffff,1);
directionalLight.position.set(5,5,5);
const pointLight = new THREE.PointLight(0xff0000,1,100);
pointLight.position.set(10,0,10);
scene.add(ambientLight,directionalLight,pointLight);const pbrMaterial = new THREE.MeshStandardMaterial({
color:0xffffff,metalness:0.7,
roughness:0.2,envMapIntensity:1
});
const sphere = new THREE.Mesh(
new THREE.SphereGeometry(1,32,32),
pbrMaterial
});const clock = new THREE.Clock();
function animate(){
const delta = clock.getDelta();
cube.rotation.x += delta;
cube.rotation.y += delta*0.5;
cube.position.y = Math.sin(clock.getElapsedTime());
}window.addEventListener('resize',()=>{
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
});
window.addEventListener('click',(event)=>{
const mouse = new THREE.Vector2();
mouse.x = (event.clientX/window.innerWidth)*2-1;
mouse.y = -(event.clientY/window.innerHeight)*2+1;
});.floating{animation:float 3s ease-in-out infinite;}
@keyframes float{
0%,100%{transform:translateY(0px);}
50%{transform:translateY(-10px);}
}
.glow{
box-shadow:0 0 20px rgba(52,152,219,0.5);
animation:pulse 2s infinite;
}