更多有趣示例 尽在 知屋安砖社区
示例
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ThreeJS Spinning Cube</title>
</head>
<body>
</body>
</html>
CSS
body { margin: 0; }
canvas { width: 80%; height: 80% }
JS
// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0, 1);
// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
// position and point the camera to the center of the scene
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 200;
// create a render and set the size
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
// add the output of the renderer to the html element
document.body.appendChild( renderer.domElement );
// add light to the scene
const color = 0xDC143C;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);
function createParticles() {
var geom = new THREE.Geometry();
var material = new THREE.PointCloudMaterial({size: 4, vertexColors: true, color: 0xffffff});
for (var x = -5; x < 5; x++) {
for (var y = -5; y < 5; y++) {
var particle = new THREE.Vector3(x * 10, y * 10, 0);
geom.vertices.push(particle);
geom.colors.push(new THREE.Color(Math.random() * 0xDC143C));
}
}
var cloud = new THREE.PointCloud(geom, material);
scene.add(cloud);
}
// create a cube
// var geometry = new THREE.BoxGeometry( 1, 1, 1 );
// var material = new THREE.MeshLambertMaterial({color: 0xff0000});
// var cube = new THREE.Mesh( geometry, material );
// scene.add( cube );
createParticles();
function animate() {
requestAnimationFrame( animate );
// cube.rotation.x += 0.01;
// cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();