0
点赞
收藏
分享

微信扫一扫

three.js之让物体动起来方式(二)移动物体

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="../static/three.js-master/build/three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}

</style>

</head>

<body onload="threeStart();">
<div id="canvas-frame"></div>
<script>
var renderer;

function initThree() {

renderer = new THREE.WebGLRenderer(); // 创建渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 设置长度和宽度
document.getElementById('canvas-frame').appendChild(renderer.domElement); // 添加到canvas-frame
renderer.setClearColor(0xFFFFFF, 1.0); // 设置背景色和透明度

}

var camera; // 摄像机

function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 1000;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(0, 0, 0);
}

var scene; // 场景

function initScene() {
scene = new THREE.Scene();
}

var light; // 光线

function initLight() {
light = new THREE.AmbientLight(0xFF0000); // 创建环境光源,不产生阴影
light.position.set(100, 100, 200);
scene.add(light);
light = new THREE.PointLight(0x00FF00); // 创建点光源
light.position.set(0, 0, 300);
scene.add(light);
}

var mesh; // 创建模型

function initObject() {
var geometry = new THREE.CylinderGeometry(100, 150, 400); // THREE.CylinderGeometry构造圆柱体
var material = new THREE.MeshLambertMaterial({color: 0xFFFFFF}); //THREE.MeshLambertMaterial高级材质,构造类似木头、石头等不光滑的表面
mesh = new THREE.Mesh(geometry, material); // 网状 Mesh的构造函数是这样的:Mesh( geometry, material ) geometry是它的形状,material是它的材质
mesh.position = new THREE.Vector3(0, 0, 0);
scene.add(mesh);
}

function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();

}

function animation() {
mesh.position.x += 1; // mesh就是指的物体,它有一个位置属性position,这个position是一个THREE.Vector3类型变量,所以你要把它向左移动,只需要将x的值不断的减少就可以了。这里我们减去的是1个单位。
renderer.render(scene, camera);
requestAnimationFrame(animation);
}

</script>
</body>
</html>

移动物体与移动摄像机的唯一区别是

mesh.position.x += 1;

附带three.js代码,​​点击下载​​

three.js之让物体动起来方式(二)移动物体_构造函数

 



举报

相关推荐

0 条评论