这段代码展现了three.js scene场景的基本使用法则，其中初始化，渲染器，相机，几何体，都写好了有注释。这里面值得注意的就是坐标的关系了，我已经写好了坐标的展现
位置，大家可以用肉眼观看到。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>场景的基本组件</title>
<script type="text/javascript" src="build/three.min.js"></script>
<script src="build/three.js"></script>
<script src="js/stats.min.js"></script>
<script type="text/javascript" src="js/mui.js"></script>
<script src="js/mui.min.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 1000px;
background-color: #EEEEEE;
}
</style>
<script>
mui.init();
</script>
<script>
//渲染器。
var renderer;
//场景
var scene;
//相机。
var camera;
//光线。
var light;
//初始化渲染器
var stats;
function innitrenderer() {
width = window.innerWidth;
height = window.innerHeight;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
renderer.setClearColor(0xeeeeee, 1.0);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
}
//初始化相机
function innitcamera() {
width = window.innerWidth;
height = window.innerHeight;
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.x = -30;
camera.position.y = 50;
camera.position.z = 30;
camera.lookAt(scene.position);
// camera.up.x = 0;
// camera.up.y = 1;
// camera.up.z = 0;
// camera.lookAt({
// x : 0,
// y : 0,
// z : 0
// });
}
//初始化场景
function innitscene() {
scene = new THREE.Scene();
}
function innitlight() {
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
var spotLight = new THREE.SpotLight(0xffffff);
scene.add(ambientLight);
scene.add(spotLight);
}
var planeg;
var plane;
function innitsomething() {
//绘制平面。
planeg = new THREE.PlaneGeometry(60, 40, 1, 1);
var planematerial = new THREE.MeshBasicMaterial({
color: 0xccccc
});
plane = new THREE.Mesh(planeg, planematerial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
//绘制坐标轴
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({
vertexColors: true
});
var color1 = new THREE.Color(0x444444),
color2 = new THREE.Color(0xFF0000);
// 线的材质可以由2点的颜色决定x,y,z
var p1 = new THREE.Vector3(0, 0, 0);
var p2 = new THREE.Vector3(0, 0, 100);
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.colors.push(color1, color2);
var linez= new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(linez);
var p1 = new THREE.Vector3(0, 0, 0);
var p2 = new THREE.Vector3(0, 100, 0);
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.colors.push(color1, color2);
var liney = new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(liney);
var p1 = new THREE.Vector3(0, 0, 0);
var p2 = new THREE.Vector3(100, 0, 0);
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.colors.push(color1, color2);
var linex = new THREE.Line(geometry, material, THREE.LinePieces);
scene.add(linex);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
//mesh就是网格模型
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
scene.fog=new THREE.Fog(0xfffff,0.015,100);
for(var i=0;i<100;i++)
{
addcube();
}
}
function addcube()
{
var cubesize=Math.ceil(Math.random()*3);
var cubegeometry=new THREE.CubeGeometry(cubesize,cubesize,cubesize);
var cubeMaterial=new THREE.MeshBasicMaterial({color:Math.random()*0xfffff});
var cube=new THREE.Mesh(cubegeometry,cubeMaterial);
cube.castShadow=true;
cube.name="cube-"+scene.children.length;
cube.rotation.x=-0.5*Math.PI;
cube.position.x=-15+Math.round(Math.random()*50);
cube.position.y=Math.round(Math.random()*5);
cube.position.z=-20+Math.round(Math.random()*40);
console.log(cube.position.x+","+cube.position.y+","+cube.position.z);
scene.add(cube);
}
function threeStart() {
innitscene();
innitrenderer();
innitcamera();
innitsomething();
innitlight();
console.log(scene.children);
animation();
}
function animation() {
// renderer.clear();
//camera.position.x =camera.position.x +1;
renderer.render(scene, camera);
requestAnimationFrame(animation);
scene.traverse(function(e){if(e instanceof THREE.Mesh&&e !=plane)
{
// e.rotation.x+=controls.rotationSpeed;
//
// e.rotation.y+=controls.rotationSpeed;
// e.rotation.z+=controls.rotationSpeed;
//
}
})
stats.update();
}
</script>
</head>
<body onload="threeStart();">
</body>
</html>three.js教程一场景的基本组件
猜你喜欢
转载自blog.csdn.net/qq_20949153/article/details/51069303
今日推荐
周排行