three.js入门练习 (1)

threejs入门

基础了解

  1. 物体
  2. 场景(scene)
  3. 相机(camera)
  4. 渲染器(rander)

开始

// 常量定义
const dom = document.getELementById('mycanvas');
let scene = new THREE.Scene(); // 建立场景
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 10); // 建立远景相机
camera.position.z = 1;
let geometry = new THREE.BoxGeometry(0.2,0.2,0.2); // 建立一个盒子
let material = new THREE.MeshNormalMaterial(); // 建立材质
let mesh = new THREE.Mesh(geometry, material); // 转换成网孔对象的基类
scene.add(mesh); // 将物体放入场景内
let renderer = new THREE.WebGLRenderer({ 
    antialias: true, 
    canvas: dom
}); // 建立渲染器
renderer.setClearColor(0xf3f5f9);
renderer.setSize(window.innerWidth, window.innerHeight);

renderer.render(scene, camera); // 将咱们定义的场景和相机渲染出来

如上 会绘制一个正方体在页面, 咱们让他动起来javascript

function render(){
    requestAnimationFrame(render)
    
    mesh.rotation.x += 0.01
    mesh.rotation.y += 0.01

    renderer.render(scene, camera)
}

render()

咱们刷新页面, 会看到一个多色的正方体
你能够尝试去切换材质 看看会发生什么css

相关文章
相关标签/搜索