练习three.jsdemo的详细注释

最新推荐文章于 2024-01-17 16:47:01 发布
最新推荐文章于 2024-01-17 16:47:01 发布
阅读量292 收藏
点赞数
文章标签： three.js 3dmodel
<!DOCTYPE html >
< html >
< head lang= "en" >
< meta charset= "UTF-8" >
< title > 3dmodel的load </ title >
< script src= "./thresJS/chapter7A/js/three.js" ></ script >
<!-- 引入控制 器 简单说用鼠标控制模型进行旋转移动-->
< script src= "./thresJS/chapter7A/js/controls/TrackballControls.js" ></ script >
<!--模型加载器，将vtk格式的3d文件转化为js可解析的文件-->
< script src= "./thresJS/chapter7A/js/loaders/VTKLoader.js" ></ script >
<!--兼容检测插件（1）判断canvas兼容。（2）判断webgl兼容性。（3）在页面添加不兼容提示信息。-->
< script src= "./thresJS/chapter7A/js/Detector.js" ></ script >
<!--插件：性能检测器-->
< script src= "./thresJS/chapter7A/js/Stats.js" ></ script >
< style >
body {
font-family : Monospace ;
background-color : #000 ;
color : #fff ;
margin : 0 ;
overflow : hidden ;
}
#info {
color : #fff ;
position : absolute ;
top : 10 px ;
width : 100 %;
text-align : center ;
z-index : 100 ;
display : block ;
}
#info a , . button { color : #f00 ; font-weight : bold ; text-decoration : underline ; cursor : pointer }
</ style >
</ head >
< body >
< div id= "info" ></ div >
< script >
if (! Detector . webgl ) Detector . addGetWebGLMessage () /*判断webgl兼容性，并添加不兼容提示信息*/
var container , stats , control , camera , renderer , scene , cross ;
init ();
animate ();
function init (){
/*透视相机的参数第一个代表着相机的张开的视角，类似于你自己眼睛睁开的大小，第二个就是相片（也就是成像）的宽高比例 剩下的两个参数分别是照相机到视景体最近、最远的距离，均为正值，且far应大于near*/
camera = new THREE . PerspectiveCamera ( 60 , window . innerWidth / window . innerHeight , 0.01 , 1e10 );
/*定位相机的位置，下面代表相机的位置是（0，0，0.2）*/
camera . position . z = 0.2 ;
/*实例化控制器*/
control = new THREE . TrackballControls ( camera );
/*按住鼠标左键旋转模型的速度*/
control . rotateSpeed = 5.0 ;
/*鼠标滚轮，放大或缩小模型的速度*/
control . zoomSpeed = 5 ;
/*鼠标右键平移模型的速度*/
control . panSpeed = 2 ;
/*禁用鼠标的滚轮滚动，缩小放大模型的功能*/
control . noZoom = false ;
/*禁用鼠标右键平移的功能*/
control . noPan = false ;
/*控制模型的惯性 ，true是没有惯性，不确定，待实验*/
control . staticMoving = false ;
/*动态阻尼系数，取值范围实在0-1之间就是灵敏度,值越小，就越灵敏，对左键共的功能的影响，值越大，使用左键旋转的时候，模型就会像震动一样,幅度和你移动鼠标的距离有关，但值过大的时候。如0.7点到左键模型就会疯狂旋转，
* 对右键的影响，值越大，平移的速度和距离就会变短
*对滚轮的影响的是，值越大滚轮滚动后，放大和缩小的速率就会变慢
* */
control . dynamicDampingFactor = 0.3 ;
/*实例化场景*/
scene = new THREE . Scene ();
/*将相机对象放入到场景中去*/
scene . add ( camera );

/*方向光可以看成是平行光*/
var dirLight = new THREE . DirectionalLight ( 0xfffffff );
dirLight . position . set ( 200 , 200 , 1000 ). normalize ();


/*下面这行代码是将光源放进相机的镜头中，这样随着镜头的移动那你看模型的所有部分，否则当你将光源利用scene.add()放进场景中之后，你旋转模型之后会发现，模型的背后就是黑色的*/
camera . add ( dirLight );
/*未发现这句代码的用处，因为删除之后没有影响*/
camera . add ( dirLight . target );

/*兰伯特网孔材料*/
var material = new THREE . MeshLambertMaterial ({ color : 0xffffff , side : THREE . DoubleSide });
/*加载3d模型*/
var load = new THREE . VTKLoader ();
load . addEventListener ( 'load' , function (event){
var geometry =event. content ;
var mesh = new THREE . Mesh ( geometry , material );
mesh . position . setY (- 0.09 );
scene . add ( mesh )
});
load . load ( "bunny.vtk" );

/*生成渲染器对象，antialias属性是布尔值；代表是否要锯齿效果*/
renderer = new THREE . WebGLRenderer ({ antialias : false });
/*设置清楚渲染器颜色和透明度,但是在官方文档中发现，方法应该是setClearColor，下面的应该是老版本的*/
renderer . setClearColor ( 0x000000 , 1 );
/*设置渲染器的宽高，与画布一样大小*/
renderer . setSize ( window . innerWidth , window . innerHeight );
/*建立dom节点，将渲染加入该节点，用以渲染canvas，*/
container = document . createElement ( 'div' );
document . body . appendChild ( container );
container . appendChild ( renderer . domElement );
/*性能检测插件的对象生成*/
stats = new Stats ();
stats . domElement . style . position = 'absolute' ;
stats . domElement . style . top = "0px" ;


container . appendChild ( stats . domElement );
/*监听windows窗口的大小变化*/
window . addEventListener ( "resize" , onWindowResize , false )
}
function onWindowResize (){
camera . aspect = window . innerWidth / window . innerHeight ;
/*更新相机投影矩阵，必须在参数发生变化后调用。*/
camera . updateProjectionMatrix ();

renderer . setSize ( window . innerWidth , window . innerHeight );
/*用在窗口大小变换时候执行,目前未发现其作用 */
control . handleResize ()
}
function animate (){
/*游戏循环的实现*/
requestAnimationFrame ( animate );
control . update ();
renderer . render ( scene , camera );
stats . update ();
}

</ script >
</ body >
</ html >
ILinWxx_idream_17
关注
Three.js 画3维图形Demo
01-07
这个“Three.js 画3维图形Demo”是一个示例项目，可以帮助我们了解如何使用Three.js来绘制图形、线条、文字以及嵌入视频。 在前端开发中，Three.js 提供了一个易于使用的API，使得3D渲染变得相对简单。首先，我们...
Three.js实战项目 商场漫游
qq_39503511的博客
03-14 5361
Three.js 商场漫游demo概述创建场景创建天空创建水面创建模型室内漫游 概述 开发了一个Three.js 商场漫游demo，先看视频效果 创建场景 创建渲染器，灯光，相机，控制器和以前的智慧城市项目一样，从那边照抄过来即可，调用方式如下 app = new ZThree("screen"); app.initThree(); // app.initHelper(); app.initOrbitControls(); light = app.ini
Three.js 扇形圆形
ruiti的博客
12-10 1569
最近需要一个类似轮播的3d效果，6个轮播，每页图片280*300，记录下案例demo 当前版本104 直接下载官网案例：https://github.com/mrdoob/three.js/ 参考学习案例：https://techbrood.com/threejs/examples/#webgl_geometry_shapes 我的代码： <!DOCTYPE html> &...
threejs官方demo解析（二）
Pure_White520的博客
01-17 549
threejs官方demo——webgl_animation_skinning_additive_blending ——站立的人
three.js---一个基础的demo
weixin_44691220的博客
12-07 896
一个基础的three.js demo
three.js入门一：入门demo讲解
火焰
01-20 2546
环境： threejs：129 vscode window edge 关于threejs： 开源web3d引擎 github：https://github.com/mrdoob/three.js/ 官网：https://threejs.org/ 中文教程：http://www.yanhuangxueyuan.com/WebGL/ 1. 入门Demo <!DOCTYPE html> <html lang="en"> <head> <meta cha
基于three.js的火焰demo
05-21
基于three.js开发的火焰demo，通过更改粒子颜色，可以做烟效果 具体效果参见我的CSDN博客，地址：https://blog.csdn.net/u014529917/article/details/90456707
three.js 可视化大屏 3D场馆模型Demo
最新发布
02-26
在本项目中，"three.js 可视化大屏 3D场馆模型Demo"是一个基于最新前端技术栈的实现，旨在帮助新手学习如何利用three.js创建3D场馆模型，并将其应用于大屏幕展示。这个项目结合了Vue3、Vite和TypeScript等现代Web...
three.js渲染钻石demo
06-10
**标题：“three.js渲染钻石demo”** 在计算机图形学领域，渲染是将三维模型转化为屏幕上可见图像的过程。Three.js是一个基于WebGL的JavaScript库，它允许开发者在浏览器中创建和展示复杂的3D场景。本项目名为...
使用three.js实现室内路径规划demo
05-21
使用three.js基于已有的路径和节点数据 使用d算法实现室内地图点选路径规划 具体效果参见我的博客：https://blog.csdn.net/u014529917/article/details/100424812
threejs 源码和demo示例
05-06
threejs 是轻量级的开发3d web模型网页程序的javascript类库，资源中包含了threejs的源码和demo示例。demo中包含了几十个js示例程序。是开发3d 程序最好的入门材料
基于three.js的3D立体粒子动画特效
12-12
这是一款基于three.js的3D立体粒子动画特效。示例中共有8种粒子动画特效，动画中的粒子由three.js产生，并且每个示例都提供了调节器来控制粒子动画的外观和速度。
JS 的小demo
04-25
关于 JS 交互
THREE.js知识点整理
Zmikoo学习之路
11-29 2023
three.js必备元素创建 thress.js要显示一个3D模型的必备元素：scene,camera.light,renderer H5写法： <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r127/three.min.js"></script> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75,window.i
Three.js基本 Demo
diaozhen7831的博客
08-13 217
对于新手来说，几个简单的例子非常实用，偶然发现几个不错的Demo，分享给大家！ Three.js基本 Demo 1.最基本的Hello World：http://stemkoski.github.io/Three.js/HelloWorld.html 2.在网页上调用摄像头：http://stemkoski.github.io/Three.js/Webcam-Texture.htm...
Three.js入门教程——教不会算我输
热门推荐
哆啦A瑶的博客
06-09 9万+
在javascript中使用Three.js设计并且实现3D场景是一个很有意思的事情，因为在浏览器中就能够渲染出3D场景，非常简单和轻便。接下来就总结以下我学习Three.js过程中的心得。 1 建立基本场景 在Three.js中有三要素：场景、摄像机和渲染器，只有以上三者结合才能渲染出可见的内容。当然在这之前你需要先下载Three.js文件，直接百度搜索Three.js到官网下载即可，下载完...
three.js 基础认识与简单应用
前端菜菜DayDayUp的博客
02-09 1万+
three.js 基础认识与简单应用
three.js（JS 三维模型库）介绍和入门
南北极之间
04-20 6386
three.js是一个基于WebGL的JavaScript 3D库。它封装了WebGL API，为开发者提供了简单易用的API，以便在Web浏览器中展示3D图形。three.js提供了几个组件、方法和工具，用于创建和处理3D图形，使得开发者可以在Web浏览器中快速创建3D图形和动画，而不需要深入了解WebGL的底层实现。three.js支持多种类型的3D对象，例如几何体、材质、灯光和相机等。它还提供了许多常用的几何体，例如球体、立方体、圆锥体和圆柱体，这些几何体可以进行旋转、平移和缩放等变换操作。
three.js入门 DEMO
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
09-02 2662
css与js结合完成动画效果 入门 DEMO <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://threejs.org/build/three.j...
three.js demo源码
01-24
three.js是一个用于创建3D图形的JavaScript库。在three.js的demo源码中，你可以找到许多令人惊叹的3D图形和动画效果的示例。这些demo源码展示了如何使用three.js来创建各种类型的3D场景，包括建筑物、汽车、动物、人物等。 在这些demo源码中，你可以学习到如何使用three.js的各种功能来创建各种形状和纹理，并通过着色器来渲染这些3D场景。你可以看到如何使用光照、阴影、材质和纹理来优化场景的外表。此外，这些demo源码还展示了如何添加交互性，即用户可以通过鼠标和键盘来控制3D场景。 通过研究这些demo源码，你可以了解到如何使用three.js的渲染器、相机、场景和物体等组件来构建复杂的3D场景。你还可以学习到如何使用three.js的动画系统来创建流畅的动画效果。在这些demo源码中，你还可以看到如何使用WebGL来加速3D渲染，并且了解到如何在网页中嵌入这些3D场景。 总的来说，通过研究这些demo源码，你可以学到很多关于如何使用three.js来创建令人惊叹的3D图形和动画效果的知识，这将帮助你更好地理解和掌握three.js库，为你的3D图形项目打下坚实基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值