Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Clean up.

上级 1e466921
隐藏空白更改
内联 并排
Showing with 190 addition and 190 deletion
examples/webgl_loader_utf8.html
浏览文件 @ d908b3e9
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - io - UTF8 loader</title>
<title>three.js webgl - loader - UTF8</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
......
examples/webgl_loader_vrml.html
浏览文件 @ d908b3e9
<!DOCTYPE html>
<html lang="en">
<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
<head>
<title>three.js webgl - loader - VRML</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;
}
}; // key value store of cameras based on VRML viewpoint nodes, stored by their name.
var vrmlLoader = new THREE.VRMLLoader(vrmlParser, new THREE.LoadingManager(), true);
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display: block;
}
var onLoad = function (vrmlTree) {
vrmlConverter.render(vrmlTree, scene);
#info a, .button {
color: #f00;
font-weight: bold;
text-decoration: underline;
cursor: pointer
}
var viewpointSelector = document.getElementById('viewpoints');
#viewpoints {
background-color: gray;
z-index: 101;
position: absolute;
width: 140px;
top: 10px;
left: 10px;
padding: 2px;
border: 1px solid white;
}
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);
});
}
#viewpoints div {
width: inherit;
}
</style>
};
</head>
var onError = function (error) {
var request = error.target;
if ( 404 === request.status ) {
console.log('VRML Document not found at ' + request.responseURL);
}
console.log(error);
<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;
}
var onProgress = function () {
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);
}
vrmlLoader.load('models/vrml/house.wrl', onLoad, onProgress, onError);
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();
container = document.createElement('div');
document.body.appendChild(container);
container.appendChild(renderer.domElement);
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);
window.addEventListener('resize', onWindowResize, false);
// 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
}
}; // key value store of cameras based on VRML viewpoint nodes, stored by their name.
var vrmlLoader = new THREE.VRMLLoader(vrmlParser, new THREE.LoadingManager(), true);
var onLoad = function (vrmlTree) {
vrmlConverter.render(vrmlTree, scene);
var viewpointSelector = document.getElementById('viewpoints');
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);
});
}
}
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);
var onError = function (error) {
var request = error.target;
if ( 404 === request.status ) {
console.log('VRML Document not found at ' + request.responseURL);
}
console.log(error);
}
var onProgress = function () {
}
vrmlLoader.load('models/vrml/house.wrl', onLoad, onProgress, onError);
container = document.createElement('div');
document.body.appendChild(container);
container.appendChild(renderer.domElement);
//
window.addEventListener('resize', onWindowResize, false);
}
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);
}
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.
先完成此消息的编辑！
想要评论请 注册 或