three.js模拟银色金属材质的物体

three.js silver metal material

three, metal, 材料

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4474
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(10, 10, 10);
scene.add(dirLight);

scene.add(new THREE.AmbientLight(0x404040));

/*var loader = new THREE.CubeTextureLoader();
loader.setCrossOrigin("");
loader.setPath( 'https://techbrood.com/threejs/examples/textures/cube/pisa/' );

var textureCube = loader.load( [
	'px.png', 'nx.png',
	'py.png', 'ny.png',
	'pz.png', 'nz.png'
] );*/

var cubeMat = new THREE.MeshStandardMaterial({ roughness: 0.5, metalness: 1});

var cubeGeo = new THREE.BoxGeometry(3, 3, 3, 10, 10, 10);
var smooth = cubeGeo.clone();
var modifier = new THREE.SubdivisionModifier(3);
modifier.modify(smooth);
cubeGeo = smooth;

cubeGeo.computeVertexNormals();

var cube = new THREE.Mesh(cubeGeo, cubeMat);
cube.position.set(0, 0, 0);
scene.add(cube);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

编译

CSS

HTML

three.js silver metal material

three, metal, 材料

编辑器支持Emmet

快捷键

three.js silver metal material

three, metal, 材料

three.js各向异性高光材质代码示例，常用于毛发、丝绸和金属物的渲染

three.js金色PBR材质构造金属粒子漩涡

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：