Three.js Example 注解 —— css3d_sandbox.html
2023-09-11 14:22:55 时间
本文搬自我的Github，https://github.com/555chy/three.js-example-comment，有兴趣的可以一起来完善，这个为Three.js的Example进行注解，方便初学者阅读
three.js 官网 Example 地址：https://threejs.org/examples/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
如果没有设置viewport的width的话，网页很可能会超出手机屏幕宽度，具体多宽，要看浏览器定义的默认宽度是多少
user-scalable=no，规定了用户不能缩放网页，但有些浏览器对该项支持不是很好，故需要设置minimum-scale和maximum-scale相同来限制用户缩放
-->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
color: #000000;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
z-index: 1;
}
/*
未访问 a:link {color:blue;}
已访问 a:visited {color:blue;}
鼠标悬停 a:hover {color:red;}
鼠标按下 a:active {color:yellow;}
*/
a {
color: #000000;
}
</style>
</head>
<body>
<!--
target 有4个保留的目标名称用作特殊的文档重定向操作：
_blank： 浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self： 这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent： 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top： 这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
-->
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - css3d sandbox</div>
<script src="../build/three.js"></script>
<!-- 轨迹控制，鼠标左键旋转，右键平移，中键缩放 -->
<script src="js/controls/TrackballControls.js"></script>
<script src="js/renderers/CSS3DRenderer.js"></script>
<script>
var camera, scene, renderer;
var scene2, renderer2;
var controls;
init();
animate();
function init() {
/*
PerspectiveCamera(fov, aspect, near, far)
fov(视场)：从相机位置能够看到的部分场景。推荐默认值45
aspect(长宽比)：渲染结果输出区域的横向长度和纵向长度的比值。推荐默认值window.innerWidth/window.innerHeight
near(近面)：定义从距离相机多近的地方开始渲染场景。推荐默认值0.1
far(远面)：定义相机可以从它所处的位置看多远。默认值1000
*/
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 200, 200, 200 );
//设置鼠标控制的对象为相机
controls = new THREE.TrackballControls( camera );
scene = new THREE.Scene();
scene2 = new THREE.Scene();
/*
基础材质，其着色不会受到光照等其它因素影响，仅与自身参数有关
wireframeLinewidth: 线宽，由于ANGLE layer的限制，在Windows操作系统上会无视设置，其值总是1
side: THREE.DoubleSide，设置双面渲染，默认只会渲染一个面(即从正面能看到，从背面就看不到了)
*/
var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
for ( var i = 0; i < 10; i ++ ) {
var element = document.createElement( 'div' );
element.style.width = '100px';
element.style.height = '100px';
element.style.opacity = 0.5;
//使用style中的border也能实现线框效果，就和原先2D是一样的
element.style.border = '1px solid red';
//getStyle()返回字符串形式的rgb(?,?,?)颜色
element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
//使用div标签元素初始化three.js的CSS3D对象
var object = new THREE.CSS3DObject( element );
object.position.x = Math.random() * 200 - 100;
object.position.y = Math.random() * 200 - 100;
object.position.z = Math.random() * 200 - 100;
object.rotation.x = Math.random();
object.rotation.y = Math.random();
object.rotation.z = Math.random();
object.scale.x = Math.random() + 0.5;
object.scale.y = Math.random() + 0.5;
scene2.add( object );
var geometry = new THREE.PlaneGeometry( 100, 100 );
var mesh = new THREE.Mesh( geometry, material );
//copy复制的是对象的数值，不copy的话复制的是对象的引用
mesh.position.copy( object.position );
mesh.rotation.copy( object.rotation );
mesh.scale.copy( object.scale );
scene.add( mesh );
}
renderer = new THREE.WebGLRenderer();
//设置渲染器的"清除色"和"透明度"
renderer.setClearColor( 0xf0f0f0 );
//设置屏幕像素比，与Android上的DIP相仿，作用是在所有设备上的显示效果都相近
renderer.setPixelRatio( window.devicePixelRatio );
//设置待渲染场景的大小
renderer.setSize( window.innerWidth, window.innerHeight );
//将渲染器的DOM元素(即Canvas)添加到HTML中
document.body.appendChild( renderer.domElement );
renderer2 = new THREE.CSS3DRenderer();
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.domElement.style.position = 'absolute';
renderer2.domElement.style.top = 0;
console.log(renderer2.domElement)
//将渲染器的DOM元素(即<div><div>待渲染的element</div></div>)添加到HTML中
document.body.appendChild( renderer2.domElement );
}
function animate() {
requestAnimationFrame( animate );
//更新轨迹控制器，这里轨迹控制器与相机关联，所以也会更新相机的位置和角度。因此这里就不用设置相机的lookAt了。如果鼠标移动的话，相机会绕着原点旋转
controls.update();
//renderer渲染的是线框
renderer.render( scene, camera );
//renderer2渲染的是颜色
renderer2.render( scene2, camera );
}
</script>
</body>
</html>
相关文章
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式
- Flutter加载Html并实现与JS 的双向调用
- 关于HTML、js加密、混淆、源码保护、代码安全，防止解压直接看源码
- HTML js获取系统时间（刷新、不刷新）
- JS 将数字字符串数组转为 数字数组 （互换），js获取数组对象中 某一个key的值，js判断一个数组是否包含另一个数组（一维数组）
- Three.js Example 注解 —— software_geometry_earth.html
- Three.js Example 注解 —— misc_uv_tests.html
- Three.js Example 注解 —— css3d_youtube.html
- Three.js Example 注解 —— css3d_panorama_deviceorientation.html
- Three.js Example 注解 —— canvas_sandbox.html
- Three.js Example 注解 —— canvas_particles_waves.html
- Three.js Example 注解 —— canvas_materials_video.html
- Three.js Example 注解 —— canvas_lines_dashed.html
- Three.js Example 注解 —— canvas_lines.html
- Three.js Example 注解 —— canvas_interactive_cubes_tween.html
- Three.js Example 注解 —— canvas_geometry_shapes.html
- Three.js Example 注解 —— canvas_geometry_panorama.html
- Three.js Example 注解 —— canvas_geometry_cube.html
- Three.js Example 注解 —— canvas_camera_orthographic.html
- Three.js Example 注解 —— canvas_ascii_effect.html