Three.js+OrbitControls可交互操作的3D球体旋转

THREE.js SphereGeometry sandbox

Three.js，ball

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 9897
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var renderer, scene, camera, orbit, lights, mesh;

init();
animate();

function init() {
    lights = new Array();

renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.set(0, 0, 10);
    scene.add(camera);

orbit = new THREE.OrbitControls(camera, renderer.domElement);
    orbit.enableZoom = false;

lights[0] = new THREE.PointLight(0xffffff, 1, 0);
    lights[1] = new THREE.PointLight(0xffffff, 1, 0);
    lights[2] = new THREE.PointLight(0xffffff, 1, 0);

lights[0].position.set(0, 200, 0);
    lights[1].position.set(100, 200, 100);
    lights[2].position.set(-100, -200, -100);

scene.add(lights[0]);
    scene.add(lights[1]);
    scene.add(lights[2]);

mesh = new THREE.Object3D();
    mesh.add(new THREE.LineSegments(
        new THREE.Geometry(),
        new THREE.LineBasicMaterial({
            color: 0xffffff,
            transparent: true,
            opacity: 1
        })
    ));
    mesh.add(new THREE.Mesh(
        new THREE.SphereGeometry(3, 24, 24),
        new THREE.MeshPhongMaterial({
            color: 0x156289,
            emissive: 0x072534,
            side: THREE.DoubleSide,
            shading: THREE.FlatShading
        })
    ));
    scene.add(mesh);

renderer.render(scene, camera);
}

function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.x += 0.003;
    mesh.rotation.y += 0.007;
    renderer.render(scene, camera);
}

编译

CSS

HTML

THREE.js SphereGeometry sandbox

Three.js，ball

编辑器支持Emmet

快捷键

THREE.js SphereGeometry sandbox

Three.js，ball

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：