根据官方文档,学习如何在React上,从头开始创建一个会活动的Three.js场景动画
参考源码链接:github.com/SHENLing062…
-
安装node.js和create-react-app脚手架 - 具体参考官方文档
- Three.js Guideline: threejs.org/docs/#manua…
- Create-react-app Guideline: facebook.github.io/create-reac…
-
打开一个文件夹,利用create-react-app创建新项目
create-react-app <--project name-->
-
进入创建的文件夹
cd <--project name-->
-
安装THREE包
npm install three
-
在src目录新建cube.js,用以创建cube组件
echo cube.js
-
将src目录下的app.js修改,使其引入cube组件
-
进入cube.js,创建Three.js内容
(1)创建componentDidMount()用以调用执行初始化函数
(2)在initThree()中创建内容 A. 初始化并new照相机(camera)、场景(scene)
//create scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0x515151);
group = new THREE.Group();
scene.add(group);
//create camera
camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 1, 2000 );
camera.position.x = -10;
camera.position.y = 15;
camera.position.z = 500;
B. 创建要旋转的立方体
//create the cube
let geometry = new THREE.BoxGeometry(100, 100, 100); //create BoxGeometry object
let material = new THREE.MeshBasicMaterial({ color: 0xffffff}); //set the material of the cube
let cube = new THREE.Mesh( geometry, material); //Mesh contains the cube and the material, we can push the mesh object into our scenerio, and make it moves freely in the scene
group.add(cube);
C. 创建渲染器
//create renderer
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xffffff );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight);//渲染器大小尺寸
container.appendChild( renderer.domElement );
D. 创建动画效果
function animate () {
requestAnimationFrame(animate);
group.rotation.x += 0.01;
group.rotation.y += 0.01;
renderer.render( scene, camera);
}
initThree中完整代码:
initThree = () => {
let camera, scene, renderer, group;
let container = document.getElementById('cube');
init();
animate();
function init() {
//create scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0x515151);
group = new THREE.Group();
scene.add(group);
//create camera
camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 1, 2000 );
camera.position.x = -10;
camera.position.y = 15;
camera.position.z = 500;
//create the cube
let geometry = new THREE.BoxGeometry(100, 100, 100); //create BoxGeometry object
let material = new THREE.MeshBasicMaterial({ color: 0xffffff}); //set the material of the cube
let cube = new THREE.Mesh( geometry, material); //Mesh contains the cube and the material, we can push the mesh object into our scenerio, and make it moves freely in the scene
group.add(cube);
let geo2 = new THREE.SphereGeometry()
//create renderer
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xffffff );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight);//渲染器大小尺寸
container.appendChild( renderer.domElement );
}
function animate () {
requestAnimationFrame(animate);
group.rotation.x += 0.01;
group.rotation.y += 0.01;
renderer.render( scene, camera);
}
}
- 运行React.app: 在http://localhost:3000 中查看
npm start