Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 e439160f 编写于 作者: M Mr.doob 提交者： GitHub
浏览文件
操作

Merge pull request #12404 from Mugen87/dev4 

Examples: Improve basic geometry demos
上级 e0dd445f 4253e646
隐藏空白更改
内联 并排
Showing with 88 addition and 65 deletion
examples/webgl_geometries.html
浏览文件 @ e439160f
...@@ -6,15 +6,33 @@ ...@@ -6,15 +6,33 @@
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style> <style>
body { body {
font-family: Monospace; color: #eee;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #000; background-color: #000;
margin: 0px; margin: 0px;
padding: 0px;
overflow: hidden; overflow: hidden;
} }
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0080ff;
}
</style> </style>
</head> </head>
<body> <body>
<div id="container"></div>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - geometries</div>
<script src="../build/three.js"></script> <script src="../build/three.js"></script>
<script src="js/Detector.js"></script> <script src="js/Detector.js"></script>
...@@ -24,17 +42,14 @@ ...@@ -24,17 +42,14 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats; var camera, scene, renderer, stats;
var camera, scene, renderer;
init(); init();
animate(); animate();
function init() { function init() {
container = document.createElement( 'div' ); var container = document.getElementById( 'container' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.y = 400; camera.position.y = 400;
...@@ -43,60 +58,61 @@ ...@@ -43,60 +58,61 @@
var light, object; var light, object;
scene.add( new THREE.AmbientLight( 0x404040 ) ); var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff ); var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
light.position.set( 0, 1, 0 ); camera.add( pointLight );
scene.add( light ); scene.add( camera );
var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' ); var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
map.wrapS = map.wrapT = THREE.RepeatWrapping; map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16; map.anisotropy = 16;
var material = new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } ); var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
// //
object = new THREE.Mesh( new THREE.SphereGeometry( 75, 20, 10 ), material ); object = new THREE.Mesh( new THREE.SphereGeometry( 75, 20, 10 ), material );
object.position.set( -400, 0, 200 ); object.position.set( - 300, 0, 200 );
scene.add( object ); scene.add( object );
object = new THREE.Mesh( new THREE.IcosahedronGeometry( 75, 1 ), material ); object = new THREE.Mesh( new THREE.IcosahedronGeometry( 75, 1 ), material );
object.position.set( -200, 0, 200 ); object.position.set( - 100, 0, 200 );
scene.add( object ); scene.add( object );
object = new THREE.Mesh( new THREE.OctahedronGeometry( 75, 2 ), material ); object = new THREE.Mesh( new THREE.OctahedronGeometry( 75, 2 ), material );
object.position.set( 0, 0, 200 ); object.position.set( 100, 0, 200 );
scene.add( object ); scene.add( object );
object = new THREE.Mesh( new THREE.TetrahedronGeometry( 75, 0 ), material ); object = new THREE.Mesh( new THREE.TetrahedronGeometry( 75, 0 ), material );
object.position.set( 200, 0, 200 ); object.position.set( 300, 0, 200 );
scene.add( object ); scene.add( object );
// //
object = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100, 4, 4 ), material ); object = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100, 4, 4 ), material );
object.position.set( -400, 0, 0 ); object.position.set( - 300, 0, 0 );
scene.add( object ); scene.add( object );
object = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 ), material ); object = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 ), material );
object.position.set( -200, 0, 0 ); object.position.set( - 100, 0, 0 );
scene.add( object ); scene.add( object );
object = new THREE.Mesh( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), material ); object = new THREE.Mesh( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), material );
object.position.set( 0, 0, 0 ); object.position.set( 100, 0, 0 );
scene.add( object ); scene.add( object );
object = new THREE.Mesh( new THREE.RingGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material ); object = new THREE.Mesh( new THREE.RingGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material );
object.position.set( 200, 0, 0 ); object.position.set( 300, 0, 0 );
scene.add( object ); scene.add( object );
//
object = new THREE.Mesh( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), material ); object = new THREE.Mesh( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), material );
object.position.set( 400, 0, 0 ); object.position.set( - 300, 0, - 200 );
scene.add( object ); scene.add( object );
//
var points = []; var points = [];
for ( var i = 0; i < 50; i ++ ) { for ( var i = 0; i < 50; i ++ ) {
...@@ -106,23 +122,15 @@ ...@@ -106,23 +122,15 @@
} }
object = new THREE.Mesh( new THREE.LatheGeometry( points, 20 ), material ); object = new THREE.Mesh( new THREE.LatheGeometry( points, 20 ), material );
object.position.set( -400, 0, -200 ); object.position.set( - 100, 0, - 200 );
scene.add( object ); scene.add( object );
object = new THREE.Mesh( new THREE.TorusGeometry( 50, 20, 20, 20 ), material ); object = new THREE.Mesh( new THREE.TorusGeometry( 50, 20, 20, 20 ), material );
object.position.set( -200, 0, -200 ); object.position.set( 100, 0, - 200 );
scene.add( object ); scene.add( object );
object = new THREE.Mesh( new THREE.TorusKnotGeometry( 50, 10, 50, 20 ), material ); object = new THREE.Mesh( new THREE.TorusKnotGeometry( 50, 10, 50, 20 ), material );
object.position.set( 0, 0, -200 ); object.position.set( 300, 0, - 200 );
scene.add( object );
object = new THREE.AxesHelper( 50 );
object.position.set( 200, 0, -200 );
scene.add( object );
object = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50 );
object.position.set( 400, 0, -200 );
scene.add( object ); scene.add( object );
// //
...@@ -171,14 +179,16 @@ ...@@ -171,14 +179,16 @@
camera.lookAt( scene.position ); camera.lookAt( scene.position );
for ( var i = 0, l = scene.children.length; i < l; i ++ ) { scene.traverse( function( object ) {
var object = scene.children[ i ]; if ( object.isMesh === true ) {
object.rotation.x = timer * 5; object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5; object.rotation.y = timer * 2.5;
} }
} );
renderer.render( scene, camera ); renderer.render( scene, camera );
......
examples/webgl_geometries_parametric.html
浏览文件 @ e439160f
...@@ -6,15 +6,33 @@ ...@@ -6,15 +6,33 @@
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style> <style>
body { body {
font-family: Monospace; color: #eee;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #000; background-color: #000;
margin: 0px; margin: 0px;
padding: 0px;
overflow: hidden; overflow: hidden;
} }
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0080ff;
}
</style> </style>
</head> </head>
<body> <body>
<div id="container"></div>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - parametric geometries</div>
<script src="../build/three.js"></script> <script src="../build/three.js"></script>
<script src="js/Detector.js"></script> <script src="js/Detector.js"></script>
...@@ -34,8 +52,7 @@ ...@@ -34,8 +52,7 @@
function init() { function init() {
var container = document.createElement( 'div' ); var container = document.getElementById( 'container' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.y = 400; camera.position.y = 400;
...@@ -44,11 +61,12 @@ ...@@ -44,11 +61,12 @@
// //
scene.add( new THREE.AmbientLight( 0x404040 ) ); var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );
var light = new THREE.DirectionalLight( 0xffffff ); var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
light.position.set( 0, 0, 1 ); camera.add( pointLight );
scene.add( light ); scene.add( camera );
// //
...@@ -56,28 +74,26 @@ ...@@ -56,28 +74,26 @@
map.wrapS = map.wrapT = THREE.RepeatWrapping; map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 16; map.anisotropy = 16;
var materials = [ var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } ),
new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: THREE.DoubleSide } )
];
// //
var geometry, object; var geometry, object;
geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.plane( 100, 100 ), 10, 10 ); geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.plane( 100, 100 ), 10, 10 );
object = THREE.SceneUtils.createMultiMaterialObject( geometry, materials ); geometry.center();
object = new THREE.Mesh( geometry, material );
object.position.set( - 200, 0, 200 ); object.position.set( - 200, 0, 200 );
scene.add( object ); scene.add( object );
geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 20, 20 ); geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 20, 20 );
object = THREE.SceneUtils.createMultiMaterialObject( geometry, materials ); object = new THREE.Mesh( geometry, material );
object.position.set( 0, 0, 200 ); object.position.set( 0, 0, 200 );
object.scale.multiplyScalar( 5 ); object.scale.multiplyScalar( 5 );
scene.add( object ); scene.add( object );
geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.mobius, 20, 20 ); geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.mobius, 20, 20 );
object = THREE.SceneUtils.createMultiMaterialObject( geometry, materials ); object = new THREE.Mesh( geometry, material );
object.position.set( 200, 0, 200 ); object.position.set( 200, 0, 200 );
object.scale.multiplyScalar( 30 ); object.scale.multiplyScalar( 30 );
scene.add( object ); scene.add( object );
...@@ -90,23 +106,18 @@ ...@@ -90,23 +106,18 @@
var sphere = new THREE.ParametricGeometries.SphereGeometry( 50, 20, 10 ); var sphere = new THREE.ParametricGeometries.SphereGeometry( 50, 20, 10 );
var tube = new THREE.ParametricGeometries.TubeGeometry( GrannyKnot, 100, 3, 8, true, false ); var tube = new THREE.ParametricGeometries.TubeGeometry( GrannyKnot, 100, 3, 8, true, false );
object = THREE.SceneUtils.createMultiMaterialObject( torus, materials ); object = new THREE.Mesh( torus, material );
object.position.set( - 200, 0, - 200 ); object.position.set( - 200, 0, - 200 );
scene.add( object ); scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( sphere, materials ); object = new THREE.Mesh( sphere, material );
object.position.set( 0, 0, - 200 ); object.position.set( 0, 0, - 200 );
scene.add( object ); scene.add( object );
object = THREE.SceneUtils.createMultiMaterialObject( tube, materials ); object = new THREE.Mesh( tube, material );
object.position.set( 200, 0, - 200 ); object.position.set( 200, 0, - 200 );
object.scale.multiplyScalar( 2 ); object.scale.multiplyScalar( 2 );
scene.add( object ); scene.add( object );
//
object = new THREE.AxesHelper( 50 );
scene.add( object );
// //
...@@ -149,14 +160,16 @@ ...@@ -149,14 +160,16 @@
camera.lookAt( scene.position ); camera.lookAt( scene.position );
for ( var i = 0, l = scene.children.length; i < l; i ++ ) { scene.traverse( function( object ) {
if ( object.isMesh === true ) {
var object = scene.children[ i ]; object.rotation.x = timer * 5;
object.rotation.y = timer * 2.5;
object.rotation.x = timer * 5; }
object.rotation.y = timer * 2.5;
} } );
renderer.render( scene, camera ); renderer.render( scene, camera );
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或