Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Merge pull request #10290 from bartmcleod/dev 

New VRMLLoader based on the VrmlParser project
上级 695c9191 cf944781
展开全部 隐藏空白更改
内联 并排
Showing with 4671 addition and 5544 deletion
examples/js/libs/vrml.min.js 0 → 100644
浏览文件 @ 1e466921
此差异已折叠。
examples/js/loaders/VRMLLoader.js
浏览文件 @ 1e466921
此差异已折叠。
examples/models/vrml/house.wrl
浏览文件 @ 1e466921
此差异已折叠。
examples/webgl_loader_vrml.html
浏览文件 @ 1e466921
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - vrml loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
<head>
<title>VRML loading with ThreeJs and VrmlParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display: block;
}
#info a, .button {
color: #f00;
font-weight: bold;
text-decoration: underline;
cursor: pointer
}
#viewpoints {
background-color: gray;
z-index: 101;
position: absolute;
width: 140px;
top: 10px;
left: 10px;
padding: 2px;
border: 1px solid white;
}
#viewpoints div {
width: inherit;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js / VrmlParser</a> -
vrml format loader test using VrmlParser -
</div>
<div id="viewpoints">
<h4>Viewpoints from the VRML file</h4>
</div>
<script src="../build/three.min.js"></script>
<script src="js/libs/vrml.min.js"></script>
<script src="js/loaders/VRMLLoader.js"></script>
<script src="js/renderers/Projector.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/controls/FlyControls.js"></script>
<script src="js/controls/FirstPersonControls.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script>
var container;
var camera, controls, scene, renderer, dirLight;
var animation;
// setup a clock
var clock = new THREE.Clock();
init();
animate();
function resetControls() {
controls = new THREE.FlyControls(camera);
controls.rotateSpeed = 1;
controls.zoomSpeed = 0.2;
controls.panSpeed = 0.2;
controls.enableZoom = true;
controls.enablePan = true;
}
function setupLight() {
if ( ! dirLight ) {
dirLight = new THREE.DirectionalLight(0xaaaaaa);
dirLight.position.set(500, 500, 1000).normalize();
dirLight.castShadow = false;
}
camera.add(dirLight);
camera.add(dirLight.target);
}
function selectViewpoint(event, vrmlConverter) {
var viewpoint = event.target.dataset.name;
console.log('clicked ' + viewpoint);
camera = vrmlConverter.viewpoints[ viewpoint ].getCamera();
setupLight();
resetControls();
animation.addClickSupport(camera, renderer);
}
function init() {
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1e5);
camera.position.z = 4;
camera.position.y = 3;
camera.position.x = 0;
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xffffff, 1, 5000);
scene.fog.color.setHSL(0.6, 0, 1);
scene.add(camera);
setupLight();
resetControls();
var debug = true;
var vrmlConverter = new VrmlParser.Renderer.ThreeJs(debug);
// renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true;
renderer.setClearColor(0x000000, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
// add support for animation and interaction
animation = new VrmlParser.Renderer.ThreeJs.Animation(debug);
animation.addClickSupport(camera, renderer);
// initialize the viewpoinst with the camera from the global scope
vrmlConverter.viewpoints = {
reset: {
getCamera: function () {
return this.camera;
}, name: 'surrounding_reset', camera: camera
}
#info {
color: #fff;
position: absolute;
top: 10px;
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">
<a href="http://threejs.org" target="_blank">three.js</a> -
vrml format loader test -
<!--model from <a href="http://cs.iupui.edu/~aharris/webDesign/vrml/" target="_blank">VRML 2.0 Tutorial</a>,-->
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/VRMLLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, controls, scene, renderer;
var cross;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.01, 1e10 );
camera.position.z = 6;
}; // key value store of cameras based on VRML viewpoint nodes, stored by their name.
controls = new THREE.OrbitControls( camera );
var vrmlLoader = new THREE.VRMLLoader(vrmlParser, new THREE.LoadingManager(), true);
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
var onLoad = function (vrmlTree) {
vrmlConverter.render(vrmlTree, scene);
scene = new THREE.Scene();
scene.add( camera );
var viewpointSelector = document.getElementById('viewpoints');
// light
var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 200, 200, 1000 ).normalize();
camera.add( dirLight );
camera.add( dirLight.target );
var loader = new THREE.VRMLLoader();
loader.load( 'models/vrml/house.wrl', function ( object ) {
scene.add( object );
} );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
//
for ( a in vrmlConverter.viewpoints ) {
if ( typeof a === 'string' ) {
var option = document.createElement('div');
option.innerHTML = a;
option.setAttribute('data-name', a);
viewpointSelector.appendChild(option);
option.addEventListener('click', function (event) {
selectViewpoint(event, vrmlConverter);
});
}
}
window.addEventListener( 'resize', onWindowResize, false );
};
var onError = function (error) {
var request = error.target;
if ( 404 === request.status ) {
console.log('VRML Document not found at ' + request.responseURL);
}
console.log(error);
}
function onWindowResize() {
var onProgress = function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
renderer.setSize( window.innerWidth, window.innerHeight );
vrmlLoader.load('models/vrml/house.wrl', onLoad, onProgress, onError);
controls.handleResize();
container = document.createElement('div');
document.body.appendChild(container);
container.appendChild(renderer.domElement);
}
function animate() {
//
requestAnimationFrame( animate );
window.addEventListener('resize', onWindowResize, false);
controls.update();
renderer.render( scene, camera );
}
stats.update();
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
}
function animate() {
requestAnimationFrame(animate);
var delta = clock.getDelta();
if ( undefined !== controls ) {
controls.update(delta);
}
animation.update(delta);
renderer.render(scene, camera);
}
</script>
</script>
</body>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或