three.js-3

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene = new THREE.Scene();
//长方体 params：长宽高
var rectangle = new THREE.BoxGeometry(100, 100, 100);
//球体 params：半径、经纬度细分数
var arcle = new THREE.SphereGeometry(60, 40, 40);
//圆柱体 params：圆柱面顶部、底部直径、高度、圆周分段数
var cylinder = new THREE.CylinderGeometry(50, 50, 100, 25);
//正八面体
var octahedron = new THREE.OctahedronGeometry(50);
//正十二面体
var dodecahedron = new THREE.DodecahedronGeometry(50);
//正二十面体
var icosahedron = new THREE.IcosahedronGeometry(50);

var material = new THREE.MeshLambertMaterial({
    color: 0x0b49ae
});

var material2 = new THREE.MeshLambertMaterial({
    color: 0x29abe2,
    opacity: 0.3, //透明度设置
    transparent: true //是否开启透明度效果
})

var material3 = new THREE.MeshPhongMaterial({
    color: 0x00ffff,
    specular: 0x4488ee,
    shininess: 12
})

var mesh1 = new THREE.Mesh(rectangle, material2);
scene.add(mesh1);

var mesh2 = new THREE.Mesh(arcle, material3);
mesh2.translateY(110);
scene.add(mesh2);

var mesh3 = new THREE.Mesh(cylinder, material);
mesh3.translateX(100);
scene.add(mesh3);

var mesh4 = new THREE.Mesh(octahedron, material);
mesh4.translateZ(100);
scene.add(mesh4);

var mesh5 = new THREE.Mesh(dodecahedron, material);
mesh5.translateY(200);
scene.add(mesh5);

var mesh6 = new THREE.Mesh(icosahedron, material);
mesh6.translateX(190);
scene.add(mesh6);

var point = new THREE.PointLight(0xffffff);
point.position.set(500, 200, 300);
scene.add(point);

var point2 = new THREE.PointLight(0xffffff);
point2.position.set(-500, -200, -300);
scene.add(point2);

var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);

var width = window.innerWidth;
var height = window.innerHeight;
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.set(200, 400, 500);
camera.lookAt(scene.position);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0x000000, 1);
document.body.appendChild(renderer.domElement);

var helper = new THREE.AxisHelper(300);
scene.add(helper);

function render() {
    renderer.render(scene, camera);
    mesh4.rotateY(0.003);
    requestAnimationFrame(render);
}
render();
var controls = new THREE.OrbitControls(camera, renderer.domElement);

编译

CSS

HTML

three.js-3

three.js-3

编辑器支持Emmet

快捷键

three.js-3

three.js-3

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：