Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Examples: Clean up.

上级 3313330b
隐藏空白更改
内联 并排
Showing with 92 addition and 92 deletion
examples/webgl_instancing_raycast.html
浏览文件 @ aa9ae9a1
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - instancing - raycast</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<script type="module">
<head>
<title>three.js webgl - instancing - raycast</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<script type="module">
import * as THREE from '../build/three.module.js';
import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from "./jsm/controls/OrbitControls.js";
import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
import { OrbitControls } from "./jsm/controls/OrbitControls.js";
var camera, scene, renderer, stats;
var camera, scene, renderer, stats;
var mesh;
var amount = parseInt( window.location.search.substr( 1 ) ) || 10;
var count = Math.pow( amount, 3 );
var mesh;
var amount = parseInt( window.location.search.substr( 1 ) ) || 10;
var count = Math.pow( amount, 3 );
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2( 1, 1 );
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2( 1, 1 );
var rotationTheta = 0.1;
var rotationMatrix = new THREE.Matrix4().makeRotationY( rotationTheta );
var instanceMatrix = new THREE.Matrix4();
var matrix = new THREE.Matrix4();
var rotationMatrix = new THREE.Matrix4().makeRotationY( 0.1 );
var instanceMatrix = new THREE.Matrix4();
var matrix = new THREE.Matrix4();
init();
animate();
init();
animate();
function init() {
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.set( amount, amount, amount );
camera.lookAt( 0, 0, 0 );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.set( amount, amount, amount );
camera.lookAt( 0, 0, 0 );
scene = new THREE.Scene();
scene = new THREE.Scene();
var light = new THREE.HemisphereLight( 0xffffff, 0x000088 );
light.position.set( - 1, 1.5, 1 );
scene.add( light );
var light = new THREE.HemisphereLight( 0xffffff, 0x000088 );
light.position.set( - 1, 1.5, 1 );
scene.add( light );
var light = new THREE.HemisphereLight( 0xffffff, 0x880000, 0.5 );
light.position.set( - 1, - 1.5, - 1 );
scene.add( light );
var light = new THREE.HemisphereLight( 0xffffff, 0x880000, 0.5 );
light.position.set( - 1, - 1.5, - 1 );
scene.add( light );
var geometry = new THREE.SphereBufferGeometry( 0.5 );
var material = new THREE.MeshPhongMaterial( { flatShading: true } );
var geometry = new THREE.SphereBufferGeometry( 0.5 );
var material = new THREE.MeshPhongMaterial( { flatShading: true } );
mesh = new THREE.InstancedMesh( geometry, material, count );
mesh = new THREE.InstancedMesh( geometry, material, count );
var i = 0;
var offset = ( amount - 1 ) / 2;
var i = 0;
var offset = ( amount - 1 ) / 2;
var transform = new THREE.Object3D();
var transform = new THREE.Object3D();
for ( var x = 0; x < amount; x ++ ) {
for ( var x = 0; x < amount; x ++ ) {
for ( var y = 0; y < amount; y ++ ) {
for ( var y = 0; y < amount; y ++ ) {
for ( var z = 0; z < amount; z ++ ) {
for ( var z = 0; z < amount; z ++ ) {
transform.position.set( offset - x, offset - y, offset - z );
transform.updateMatrix();
transform.position.set( offset - x, offset - y, offset - z );
transform.updateMatrix();
mesh.setMatrixAt( i ++, transform.matrix );
mesh.setMatrixAt( i ++, transform.matrix );
}
}
}
}
}
}
scene.add( mesh );
scene.add( mesh );
//
//
var gui = new GUI();
gui.add( mesh, 'count', 0, count );
var gui = new GUI();
gui.add( mesh, 'count', 0, count );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
new OrbitControls( camera, renderer.domElement );
new OrbitControls( camera, renderer.domElement );
stats = new Stats();
document.body.appendChild( stats.dom );
stats = new Stats();
document.body.appendChild( stats.dom );
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'mousemove', onMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
document.addEventListener( 'mousemove', onMouseMove, false );
}
}
function onWindowResize() {
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
}
}
function onMouseMove( event ) {
function onMouseMove( event ) {
event.preventDefault();
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
}
function animate() {
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame( animate );
render();
render();
}
}
function render() {
function render() {
raycaster.setFromCamera( mouse, camera );
raycaster.setFromCamera( mouse, camera );
var intersection = raycaster.intersectObject( mesh );
var intersection = raycaster.intersectObject( mesh );
if ( intersection.length > 0 ) {
if ( intersection.length > 0 ) {
mesh.getMatrixAt( intersection[ 0 ].instanceId, instanceMatrix );
matrix.multiplyMatrices( instanceMatrix, rotationMatrix );
var instanceId = intersection[ 0 ].instanceId;
mesh.setMatrixAt( intersection[ 0 ].instanceId, matrix );
mesh.instanceMatrix.needsUpdate = true;
mesh.getMatrixAt( instanceId, instanceMatrix );
matrix.multiplyMatrices( instanceMatrix, rotationMatrix );
}
mesh.setMatrixAt( instanceId, matrix );
mesh.instanceMatrix.needsUpdate = true;
renderer.render( scene, camera );
}
stats.update();
renderer.render( scene, camera );
}
stats.update();
</script>
}
</body>
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或