three.js学习（1）：

最新推荐文章于 2022-10-28 11:14:14 发布

.无聊de热水

最新推荐文章于 2022-10-28 11:14:14 发布

阅读量214

点赞数

分类专栏：前端文章标签： js three.js 3D

本文链接：https://blog.csdn.net/qq_31976161/article/details/84061626

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.three.js是：
three.js是用JavaScript编写的WebGL第三方库。官网（www.threejs.org)
2.three.js功能：
three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。
3.three.js用法
（1）导入three.js；
（2）创建场景Scene及设置；
（3）创建相机Camera及设置；
（4）创建渲染器Renderer；
（5）创建模型或导入模型，设置材质等；
（6）添加模型到场景中；
（7）设置灯光等；
（8）添加动画，音频等；
（9）渲染场景；
官方实例

<html>
 <head>
  <title>My First three.js app</title>
        <script src="js/three.js"></script>
  <style>
   body{margin:0;}
   canvas{width:100%;height:100%;}
  </style>
 </head>
 <body>
 <script>
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,000);
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth,window.innerHeight);
  document.body.appendChild(renderer.domElement);
  var geometry = new THREE.BoxGeometry(1,1,1);
  var material = new THREE.MeshBasicMaterial({color:0x00ff00});
  var cube = new THREE.Mesh(geometry,material);
  scene.add(cube);
  camera.position.z = 5;
  var animate = function(){
   requestAnimationFrame(animate);
   cube.rotation.x += 0.01;
   cube.rotation.y += 0.01;
   renderer.render(scene,camera);
  };
  animate();
 </script>
 </body>
</html>

.无聊de热水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js学习（1）：

1.three.js是：three.js是用JavaScript编写的WebGL第三方库。官网（www.threejs.org)2.three.js功能：three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。3.three.js用法（1）导入three.js；（2）创建场景Scene；（3）创建相机Camera及设置；...
复制链接

扫一扫