Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
three.js 使用
function generationGrid() {
var size = 500, step = 50;
var geometry = new THREE.Geometry();
for (var i = - size; i <= size; i += step) {
geometry.vertices.push(new THREE.Vector3( - size, 0, i));
geometry.vertices.push(new THREE.Vector3(size, 0, i));
geometry.vertices.push(new THREE.Vector3(i, 0, -size));
geometry.vertices.push(new THREE.Vector3(i, 0, size));
}
var material = new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2, transparent: true });
var line = new THREE.LineSegments(geometry, material);
// 添加两条中间线
var lineOneGeo = new THREE.Geometry();
var lineOneMaterial = new THREE.LineBasicMaterial({ color: 0xff0000, opacity: 0.8, transparent: true });
lineOneGeo.vertices.push(
new THREE.Vector3(-500, 0, 0),
new THREE.Vector3(500, 0, 0)
);
var lineTwoGeo = new THREE.Geometry();
var lineTwoMaterial = new THREE.LineBasicMaterial({ color: 0x0000ff, opacity: 0.8, transparent: true });
lineTwoGeo.vertices.push(
new THREE.Vector3(0, 0, -500),
new THREE.Vector3(0, 0, 500)
);
var lineThreeGeo = new THREE.Geometry();
var lineThreeMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00, opacity: 0.8, transparent: true });
lineThreeGeo.vertices.push(
new THREE.Vector3(0, -500, 0),
new THREE.Vector3(0, 500, 0)
);
var centerLineMaterial = new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.8, transparent: true });
line.add(new THREE.Line(lineOneGeo, lineOneMaterial));
line.add(new THREE.Line(lineTwoGeo, lineTwoMaterial));
line.add(new THREE.Line(lineThreeGeo, lineThreeMaterial));
return line;
}
(function() {
var scene = new THREE.Scene();
// 创建摄像头,并且设置位置
var camera = new THREE.PerspectiveCamera(75
, window.innerWidth / window.innerHeight
, 0.1, 2000);
camera.position.set(390.26, 800.99, 200.71);
camera.rotation.set( - 0.2 * Math.PI, -0.5, 0.01);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xeeeeee);
document.body.appendChild(renderer.domElement);
// 绘制辅助线
var line = generationGrid();
scene.add(line);
// 绘制一个地面
var planeGeometry = new THREE.PlaneGeometry(800, 550, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.set(-0.5 * Math.PI, 0 , 0);
scene.add(plane);
// 添加一个 spotlight
var spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(-100, 300, -40);
spotlight.castShadow = true;
scene.add(spotlight);
// 一个旋转的帮助
var controls = new THREE.OrbitControls( camera, renderer.domElement );
//controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = false;
camera.lookAt(scene.position);
renderer.render(scene, camera);
function run() {
requestAnimationFrame(run);
controls.update();
renderer.render(scene, camera);
}
// 产生一堆 cube
function generationCubes() {
var cubeSize = Math.ceil((Math.random() * 50));
var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.name = "cube-" + scene.children.length;
// position the cube randomly in the scene
cube.position.x = -400 + Math.round((Math.random() * (planeGeometry.parameters.width)));
cube.position.y = cubeSize / 2 + Math.round((Math.random() * 5));
cube.position.z = -275 + Math.round((Math.random() * (planeGeometry.parameters.height)));
// add the cube to the scene
scene.add(cube);
}
var loop = Math.random() * 100 + 50;
for (var i = 0; i < loop; i++) {
generationCubes();
}
run();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.