立方体
1. 效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8225c839320fd3b3f9bc84245430bc80.png)
2. 要点
- new THREE.BoxGeometry(100, 100, 100, 5, 5, 5);
- new THREE.MeshLambertMaterial({color: ‘#FFDEAD’});
- new THREE.Mesh(geometry, material)
- mesh2.translateY(120);
- new THREE.BufferAttribute(vertices, 3)
- point.position.set(400, 200, 300); //点光源位置
- camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
3. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个three.js文件_WebGL三维场景</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<!--引入three.js三维引擎-->
<!-- <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>-->
<script src="three.js-master/three.js-master/build/three.js"></script>
<!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<body>
<script>
var scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(100, 100, 100, 5, 5, 5);
var material = new THREE.MeshLambertMaterial({
color: '#FFDEAD'
});
var geometry2 = new THREE.SphereGeometry(50, 100, 30);
var material2 = new THREE.MeshLambertMaterial({
color: '#2E8B57',
opacity: 0.7,
wireframe: true,
transparent: true
});
var mesh = new THREE.Mesh(geometry, material);
var mesh2 = new THREE.Mesh(geometry2, material2);
mesh2.translateY(120);
scene.add(mesh);
scene.add(mesh2);
var geometry3 = new THREE.BufferGeometry();
var vertices = new Float32Array([
0, 0, 0,
50, 0, 0,
0, 100, 0,
0, 0, 10,
0, 0, 100,
50, 0, 10,
]);
var attribue = new THREE.BufferAttribute(vertices, 3);
geometry3.attributes.position = attribue;
var material3 = new THREE.MeshBasicMaterial({
color: 0x0000ff,
side: THREE.DoubleSide
});
var mesh3 = new THREE.Mesh(geometry3, material3);
mesh3.translateX(120)
scene.add(mesh3)
var point = new THREE.PointLight('#FFDEAD');
point.position.set(400, 200, 300);
scene.add(point);
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 200;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xb9d3ff, 1);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
</script>
</body>
</html>