在场景中摆放物体时，它们之间的间距到底是多少？可以借助网格工具来精确绘制。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<div id="webgl"></div>
</body>
</html>
<script>
var camera, scene, renderer, plane;
init();
function init() {
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 200, 0);
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
//创建坐标轴
createAxis(scene);
// 网格辅助工具
createGrid(scene);
// 创建平面
createPlane(scene);
// createBox(scene);
render(document.getElementById('webgl'));
}
function createAxis(scene) {
// 坐标轴辅助工具
var axes = new THREE.AxesHelper(500); //500表示xyz轴的长度，红:x,绿:y,蓝:z
scene.add(axes);
}
function createGrid(scene) {
const gridHelper = new THREE.GridHelper(1000, 20); //长度1000,每个格子是50x50的单元格
gridHelper.material.opacity = 0.2;
gridHelper.material.depthWrite = false;
gridHelper.material.transparent = true;
scene.add(gridHelper);
}
function createPlane(scene) {
const geomeplanetry = new THREE.PlaneGeometry(600, 100);
geomeplanetry.rotateX(- Math.PI / 2);//旋转，弧度
plane = new THREE.Mesh(geomeplanetry, new THREE.MeshBasicMaterial({ color: new THREE.Color(0x00ffff) }));
scene.add(plane);
}
function createBox(scene) {
const texture = new THREE.TextureLoader().load('img/crate.gif');
const material = new THREE.MeshBasicMaterial({ map: texture });
const box = new THREE.Mesh(new THREE.BoxGeometry(150, 150, 150), material);
box.position.set(10, 10, 10);
scene.add(box);
}
function render(dom) {
renderer = new THREE.WebGLRenderer({
antialias: true,
});//画布
renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染区域尺寸
dom.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
}
animate();
function animate() {
renderer.render(scene, camera);//开始渲染
requestAnimationFrame(animate);
}
</script>
5.png
网友评论