Three.js入门----简单立方体动画_three 开场动画-CSDN博客

本文链接：https://blog.csdn.net/weixin_40024527/article/details/77877375

本文引导初学者入门Three.js，通过设置样式、初始化渲染器和场景，详细介绍了如何创建一个简单的立方体动画。内容涵盖关键步骤和相关技术，如WebGL、OpenGL ES和javascript的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置样式：

*{
            margin: 0;
            padding: 0;
}

声明并初始化Renderer (渲染器对象)：

//初始化renderer渲染器对象
var renderer = new THREE.WebGLRenderer();
//设置renderer的宽，高(例子为充满屏幕)
renderer.setSize(window.innerWidth,window.innerHeight);
//添加dom元素到页面
document.body.appendChild(renderer.domElement);
//设置renderer的默认颜色和透明度
renderer.setClearColor("gray",1.0);

初始化Scene (场景)：

var scene = new THREE.Scene();

初始化Camera (相机)：

//perspective透视投影相机，(fov,aspect,near,far)四个参数依次为投影角度，近端裁切面宽高比，近端裁切面与相机的距离，远端裁切面与相机的距离
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
//设置相机的位置
camera.position.x=0;
camera.position.y=2;
camera.position.z=7;
//设置相机聚焦的位置，例子为聚焦场景；也可以设置自定义位置。
camera.lookAt(scene.position);

添加Cube (立方体)：

//创建（长，宽，高）均为1的几何体(立方体)
var geometry = new THREE.CubeGeometry(1,1,1);
//设置立方体材质
var material = new THREE.MeshLambertMaterial({color:"yellow"});
//生成立方体，使用几何体geometr