WebGL中文网学习Three.js之3D简单案例

最新推荐文章于 2024-05-21 23:25:17 发布

晓不点

最新推荐文章于 2024-05-21 23:25:17 发布

阅读量294

点赞数

分类专栏： 3D

本文链接：https://blog.csdn.net/qq_44187211/article/details/117340035

版权

3D 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/three.js"></script>
</head>
<body>

</body>
<script>
  //定义场景
  const scene = new THREE.Scene();
  //定义相机（透视相机）
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  //渲染器
  const renderer = new THREE.WebGLRenderer();
  //设置渲染器大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor('#fff');
  //渲染到窗口上
  document.body.appendChild(renderer.domElement);
  //定义几何体
  const geometry = new THREE.CubeGeometry(1,1,1);
  //定义几何体的材质
  const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
  //组合网格对象
  const cube = new THREE.Mesh(geometry, material);
  //添加到场景中
  scene.add(cube);
  camera.position.z = 5;
  //定义渲染函数
  function render() {
    //js新函数，不断调用函数
    requestAnimationFrame(render);
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    //用渲染器渲染
    renderer.render(scene, camera);
  }
  //调用
  render();
</script>

</html>

晓不点

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebGL中文网学习Three.js之3D简单案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/three.js"></script></head><body></body><script> //定义场景 const scen
复制链接

扫一扫