threejs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 124232|回复: 0

02 Three.js的hello world

[复制链接]

227

主题

203

帖子

589

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
589
发表于 2021-1-3 10:47:21 | 显示全部楼层 |阅读模式


(1)首先引入了three.js的库文件,就和引入jq一样。
(2)创建场景(17行)
(3)创建相机,并设置视野,显示的宽高比,近裁剪面,远裁剪面(19行)
(4)创建渲染器,并设置属性,放置到dom中(21-25行)
(5)创建一个立方体模型,并放入到场景(28-34)
(6)设置相机的位置(36行)
(7)设置一个动画函数,并使用渲染器把场景和相机渲染出来,每秒60帧,显示出来,就变成了动画
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="https://www.wjceo.com/lib/three.js"></script>
  9.     <style>
  10.         body{margin:0;}
  11.         canvas{width: 100%; height:100%; display: block;}
  12.     </style>
  13. </head>
  14. <body>
  15. <script>
  16.     //创建场景
  17.     var scene = new THREE.Scene();
  18.     //设置相机(视野,显示口的宽高比,近裁剪面,远裁剪面)
  19.     var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  20.     //渲染器
  21.     var renderer = new THREE.WebGLRenderer({antialias: true});
  22.     //设置渲染器的高度和宽度,如果加上第三个值 false,则按场景大小显示,等比例缩放
  23.     renderer.setSize( window.innerWidth, window.innerHeight,false);
  24.     //将渲染器添加到html当中
  25.     document.body.appendChild( renderer.domElement );

  26.     //盒子模型(BoxGeometry),这是一个包含立方体所有顶点和填充面的对象。
  27.     var geometry = new THREE.BoxGeometry( 1, 2, 1 );
  28.     //使用网孔基础材料(MeshBasicMaterial)进行着色器,这里只绘制了一个绿色
  29.     var material = new THREE.MeshBasicMaterial( { color: 0x00ffff } );
  30.     //使用网孔(Mesh)来承载几何模型
  31.     var cube = new THREE.Mesh( geometry, material );
  32.     //将模型添加到场景当中
  33.     scene.add( cube );
  34.     //将相机沿z轴偏移5
  35.     camera.position.z = 5;

  36.     //设置一个动画函数
  37.     var animate = function () {
  38.         //一秒钟调用60次,也就是以每秒60帧的频率来绘制场景。
  39.         requestAnimationFrame( animate );

  40.         //console.log(cube.rotation);
  41.         //每次调用模型的沿xy轴旋转0.01
  42.         cube.rotation.x += 0.01;
  43.         cube.rotation.y += 0.01;
  44.         //使用渲染器把场景和相机都渲染出来
  45.         renderer.render(scene, camera);
  46.     };

  47.     animate();
  48. </script>
  49. </body>
  50. </html>
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|threejs论坛 ( 京ICP备18014583号 )

GMT+8, 2023-9-24 18:27 , Processed in 0.016151 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表