Threejs学习-让物体根据帧渲染动起来

最新推荐文章于 2024-08-21 09:38:25 发布

qq_34706774

最新推荐文章于 2024-08-21 09:38:25 发布

阅读量215

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/qq_34706774/article/details/127319875

版权

Threejs学习

让物体根据帧渲染动起来

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/orbitcontrols";
// 场景
let scene = new THREE.Scene();
// 相机
let camera = new THREE.PerspectiveCamera(
    60,
    window.innerWidth / window.innerHeight,
    1,
    1000
);
camera.position.set(0,0,30);
scene.add(camera);
// 物体
let boxsize = new THREE.BoxGeometry(2,2,2);
let boxColor = new THREE.MeshBasicMaterial({
    color:0xFFFF00
});
let box= new THREE.Mesh(boxsize,boxColor);
console.log(box);
scene.add(box);
//渲染器
let renderer = new THREE.WebGL1Renderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
// 轨道控制器
let orbitcontrols = new OrbitControls(camera,renderer.domElement);

let axes=new THREE.AxesHelper(10);
scene.add(axes);

let clock = new THREE.Clock();

// 动起来的方法
function animi(){
    //console.log(time);
    //console.log(clock.getDelta());
    let time =clock.getElapsedTime();
    let t= time % 10;
    //console.log(t);
    let speed = t * 1;
    let scale = t / 100;
    box.position.x =  speed;
    box.position.y =  speed;
    box.position.z =  speed;
    // box.scale.x=scale;
    // box.scale.y=scale;
    // box.scale.z=scale;
    box.rotation.x = speed;
    box.rotation.y = speed;
    box.rotation.z = speed;
    // box.position.y = box.position.y + 0.01;
    // box.position.z = box.position.z + 0.01;
    // box.scale.x = box.scale.x - 0.001;
    // box.scale.y = box.scale.y - 0.001;
    // box.scale.z = box.scale.z - 0.001;
    // box.rotation.x = box.rotation.x + 0.01;
    // box.rotation.y = box.rotation.y + 0.01;
    // box.rotation.z = box.rotation.z + 0.01;
    // if(box.position.x >= 10){
    //     box.position.x=0;
    //     box.position.y=0;
    //     box.position.z=0;
    //     box.scale.x=1;
    //     box.scale.y=1;
    //     box.scale.z=1;
    //     box.rotation.x = 0;
    //     box.rotation.y = 0;
    //     box.rotation.z = 0;
    // }
    renderer.render(scene,camera);
    requestAnimationFrame(animi);
}
animi();