Javascript 使用THREE.TextureLoader时出现语法问题
我正在尝试一个全景查看器代码,它的3.js版本是r68,为了使用raycaster函数,我将3.js版本更新为r121。 当我修改代码时出现问题:Javascript 使用THREE.TextureLoader时出现语法问题,javascript,three.js,Javascript,Three.js,我正在尝试一个全景查看器代码,它的3.js版本是r68,为了使用raycaster函数,我将3.js版本更新为r121。 当我修改代码时出现问题: var texture = THREE.ImageUtils.loadTexture('img/pano2.jpg', new THREE.UVMapping(), function() { init(); animate();
var texture = THREE.ImageUtils.loadTexture('img/pano2.jpg', new THREE.UVMapping(), function() {
init();
animate();
});
进入
没有错误弹出,但渲染功能(包含在初始化功能中)和动画功能不会继续。
我不确定这是纹理的问题还是初始化函数的问题。
如果有人能给我一些建议,我将非常感激
我以此作为参考:
<!DOCTYPE html>
<html>
<head>
<title>Panorama1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html{
margin: 0;
padding: 0;
text-align: center;
}
body {
font-size: 18px;
line-height: 1.5em;
position: relative;
width: 100%;
height: 100%;
margin: 40px auto;
padding: 0;
display: inline-block;
/*max-width: 100%;
/*max-width: 1440px;*/
overflow-x: hidden;
}
a{
color: #528CE0;
}
#demo{
/* comment for fixed dimentsions */
position: relative;
width: 1440px;
height: 650px;
margin: 0 auto;
overflow: hidden;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
#demo:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
#log{
position: absolute;
background: #fff;
padding: 20px;
bottom: 20px;
left: 20px;
width: 150px;
font: normal 12px/18px Monospace, Arial, Helvetical, sans-serif;
text-align: left;
border: 3px double #ddd;
}
#description{
display: inline-block;
width: 100%;
max-width: 600px;
text-align: left;
}
</style>
</head>
<body>
<h1>A panoramic experiment with Three.JS</h1>
<h2>pano1</h2>
<div id="demo">
<div id="log"></div>
</div>
<div id="description">
</div>
<script src="libs/threejs/build/three.min.js"></script>
<script>
"use strict";
var camera,
scene,
element = document.getElementById('demo'), // Inject scene into this
renderer,
onPointerDownPointerX,
onPointerDownPointerY,
onPointerDownLon,
onPointerDownLat,
fov = 45, // Field of View
isUserInteracting = false,
lon = 0,
lat = 0,
phi = 0,
theta = 0,
onMouseDownMouseX = 0,
onMouseDownMouseY = 0,
onMouseDownLon = 0,
onMouseDownLat = 0,
width = 1440, // int || window.innerWidth
height = 650, // int || window.innerHeight
ratio = width / height;
var mouse = new THREE.Vector2();
var loader = new THREE.TextureLoader();
loader.load(
'img/demo.jpg',
function(texture){
var material = new THREE.MeshBasicMaterial({map: texture});
},
function(){
init();
animate();
},
function ( err ) {
console.error( 'An error happened.' );
}
);
//const loader = new THREE.TextureLoader();
//var texture = THREE.ImageUtils.loadTexture('img/pano2.jpg', new THREE.UVMapping(), function() {
//init();
//animate();
//});
function init() {
camera = new THREE.PerspectiveCamera(fov, ratio, 1, 1000);
scene = new THREE.Scene();
var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), material);
mesh.scale.x = -1;
scene.add(mesh);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
element.appendChild(renderer.domElement);
element.addEventListener('mousedown', onDocumentMouseDown, false);
element.addEventListener('mousewheel', onDocumentMouseWheel, false);
element.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);
window.addEventListener('resize', onWindowResized, false);
onWindowResized(null);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera( mouse, camera );
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
camera.position.x = 100 * Math.sin(phi) * Math.cos(theta);
camera.position.y = 100 * Math.cos(phi);
camera.position.z = 100 * Math.sin(phi) * Math.sin(theta);
var log = ("x: " + camera.position.x);
log = log + ("<br/>y: " + camera.position.y);
log = log + ("<br/>z: " + camera.position.z);
log = log + ("<br/>fov: " + fov);
document.getElementById('log').innerHTML = log;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
function onWindowResized(event) {
// renderer.setSize(window.innerWidth, window.innerHeight);
// camera.projectionMatrix.makePerspective(fov, window.innerWidth / window.innerHeight, 1, 1100);
renderer.setSize(width, height);
camera.updateProjectionMatrix();
}
function onDocumentMouseDown(event) {
event.preventDefault();
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
isUserInteracting = true;
element.addEventListener('mousemove', onDocumentMouseMove, false);
element.addEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseMove(event) {
if (fov < 10){
lon = (event.clientX - onPointerDownPointerX) * -0.01 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.01 + onPointerDownLat;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
else{
lon = (event.clientX - onPointerDownPointerX) * -0.175 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.175 + onPointerDownLat;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
}
function onDocumentMouseUp(event) {
isUserInteracting = false;
element.removeEventListener('mousemove', onDocumentMouseMove, false);
element.removeEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseWheel(event) {
// WebKit
if (event.wheelDeltaY) {
fov -= event.wheelDeltaY * 0.05;
// Opera / Explorer 9
} else if (event.wheelDelta) {
fov -= event.wheelDelta * 0.05;
// Firefox
} else if (event.detail) {
fov += event.detail * 1.0;
}
if (fov < 1 || fov > 55) {
fov = (fov < 1) ? 1 : 55;
}
camera.updateProjectionMatrix();
}
</script>
</body>
</html>
全景图1
html{
保证金:0;
填充:0;
文本对齐:居中;
}
身体{
字号:18px;
线高:1.5em;
位置:相对位置;
宽度:100%;
身高:100%;
利润率:40px自动;
填充:0;
显示:内联块;
/*最大宽度:100%;
/*最大宽度:1440px*/
溢出x:隐藏;
}
a{
颜色:#528CE0;
}
#演示{
/*固定尺寸注释*/
位置:相对位置;
宽度:1440px;
高度:650px;
保证金:0自动;
溢出:隐藏;
光标:移动;/*如果不支持抓取光标,则返回*/
光标:抓取;
光标:-moz抓取;
光标:-webkit抓取;
}
#演示:活动{
光标:抓取;
光标:-moz抓取;
光标:-webkit抓取;
}
#日志{
位置:绝对位置;
背景:#fff;
填充:20px;
底部:20px;
左:20px;
宽度:150px;
字体:标准12px/18px单空格,Arial,Helvetical,无衬线;
文本对齐:左对齐;
边界:3倍双ddd;
}
#描述{
显示:内联块;
宽度:100%;
最大宽度:600px;
文本对齐:左对齐;
}
使用Three.JS的全景实验
全景1
“严格使用”;
var摄像机,
场景
element=document.getElementById('demo'),//将场景注入此
渲染器,
onPointerDownPointerX,
onPointerDownPointerY,
在PointerDownlon,
onPointerDownLat,
视野=45,//视野
isUserInteracting=false,
lon=0,
lat=0,
φ=0,
θ=0,
onMouseDownMouseX=0,
onMouseDownMouseY=0,
onMouseDownLon=0,
onMouseDownLat=0,
宽度=1440,//int | | window.innerWidth
高度=650,//int | | window.innerHeight
比率=宽度/高度;
var mouse=new THREE.Vector2();
var loader=new THREE.TextureLoader();
装载机(
'img/demo.jpg',
功能(纹理){
var material=new THREE.MeshBasicMaterial({map:texture});
},
函数(){
init();
制作动画();
},
功能(err){
console.error('发生错误');
}
);
//const loader=new THREE.TextureLoader();
//var texture=THREE.ImageUtils.loadTexture('img/pano2.jpg',新的THREE.UVMapping(),function(){
//init();
//制作动画();
//});
函数init(){
摄像机=新的三个透视摄像机(视场,比率,11000);
场景=新的三个。场景();
var网格=新的三个网格(新的三个球体测量法(500,60,40),材料);
mesh.scale.x=-1;
场景。添加(网格);
renderer=new THREE.WebGLRenderer({antialas:true});
设置大小(宽度、高度);
元素.appendChild(renderer.doElement);
元素。addEventListener('mousedown',onDocumentMouseDown,false);
元素。addEventListener('mousewheel',onDocumentMouseWheel,false);
元素。addEventListener('DOMMouseScroll',onDocumentMouseWheel,false);
addEventListener('resize',onWindowResized,false);
onWindowResized(空);
}
函数animate(){
请求动画帧(动画);
render();
}
函数render(){
var raycaster=new THREE.raycaster();
raycaster.setFromCamera(鼠标、相机);
lat=数学最大值(-85,数学最小值(85,lat));
φ=三个数学degToRad(90-lat);
θ=三。数学。德格托拉(lon);
摄像机位置x=100*数学正弦(φ)*数学余弦(θ);
摄像机位置y=100*Math.cos(φ);
摄像机位置z=100*Math.sin(φ)*Math.sin(θ);
变量日志=(“x:+camera.position.x);
log=log+(“
y:”+camera.position.y);
log=log+(“
z:”+camera.position.z);
log=log+(“
视野:”+fov);
document.getElementById('log')。innerHTML=log;
摄像机。注视(场景。位置);
渲染器。渲染(场景、摄影机);
}
函数onWindowResized(事件
<!DOCTYPE html>
<html>
<head>
<title>Panorama1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html{
margin: 0;
padding: 0;
text-align: center;
}
body {
font-size: 18px;
line-height: 1.5em;
position: relative;
width: 100%;
height: 100%;
margin: 40px auto;
padding: 0;
display: inline-block;
/*max-width: 100%;
/*max-width: 1440px;*/
overflow-x: hidden;
}
a{
color: #528CE0;
}
#demo{
/* comment for fixed dimentsions */
position: relative;
width: 1440px;
height: 650px;
margin: 0 auto;
overflow: hidden;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
#demo:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
#log{
position: absolute;
background: #fff;
padding: 20px;
bottom: 20px;
left: 20px;
width: 150px;
font: normal 12px/18px Monospace, Arial, Helvetical, sans-serif;
text-align: left;
border: 3px double #ddd;
}
#description{
display: inline-block;
width: 100%;
max-width: 600px;
text-align: left;
}
</style>
</head>
<body>
<h1>A panoramic experiment with Three.JS</h1>
<h2>pano1</h2>
<div id="demo">
<div id="log"></div>
</div>
<div id="description">
</div>
<script src="libs/threejs/build/three.min.js"></script>
<script>
"use strict";
var camera,
scene,
element = document.getElementById('demo'), // Inject scene into this
renderer,
onPointerDownPointerX,
onPointerDownPointerY,
onPointerDownLon,
onPointerDownLat,
fov = 45, // Field of View
isUserInteracting = false,
lon = 0,
lat = 0,
phi = 0,
theta = 0,
onMouseDownMouseX = 0,
onMouseDownMouseY = 0,
onMouseDownLon = 0,
onMouseDownLat = 0,
width = 1440, // int || window.innerWidth
height = 650, // int || window.innerHeight
ratio = width / height;
var mouse = new THREE.Vector2();
var loader = new THREE.TextureLoader();
loader.load(
'img/demo.jpg',
function(texture){
var material = new THREE.MeshBasicMaterial({map: texture});
},
function(){
init();
animate();
},
function ( err ) {
console.error( 'An error happened.' );
}
);
//const loader = new THREE.TextureLoader();
//var texture = THREE.ImageUtils.loadTexture('img/pano2.jpg', new THREE.UVMapping(), function() {
//init();
//animate();
//});
function init() {
camera = new THREE.PerspectiveCamera(fov, ratio, 1, 1000);
scene = new THREE.Scene();
var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), material);
mesh.scale.x = -1;
scene.add(mesh);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
element.appendChild(renderer.domElement);
element.addEventListener('mousedown', onDocumentMouseDown, false);
element.addEventListener('mousewheel', onDocumentMouseWheel, false);
element.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);
window.addEventListener('resize', onWindowResized, false);
onWindowResized(null);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera( mouse, camera );
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
camera.position.x = 100 * Math.sin(phi) * Math.cos(theta);
camera.position.y = 100 * Math.cos(phi);
camera.position.z = 100 * Math.sin(phi) * Math.sin(theta);
var log = ("x: " + camera.position.x);
log = log + ("<br/>y: " + camera.position.y);
log = log + ("<br/>z: " + camera.position.z);
log = log + ("<br/>fov: " + fov);
document.getElementById('log').innerHTML = log;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
function onWindowResized(event) {
// renderer.setSize(window.innerWidth, window.innerHeight);
// camera.projectionMatrix.makePerspective(fov, window.innerWidth / window.innerHeight, 1, 1100);
renderer.setSize(width, height);
camera.updateProjectionMatrix();
}
function onDocumentMouseDown(event) {
event.preventDefault();
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
isUserInteracting = true;
element.addEventListener('mousemove', onDocumentMouseMove, false);
element.addEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseMove(event) {
if (fov < 10){
lon = (event.clientX - onPointerDownPointerX) * -0.01 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.01 + onPointerDownLat;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
else{
lon = (event.clientX - onPointerDownPointerX) * -0.175 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.175 + onPointerDownLat;
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
}
function onDocumentMouseUp(event) {
isUserInteracting = false;
element.removeEventListener('mousemove', onDocumentMouseMove, false);
element.removeEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseWheel(event) {
// WebKit
if (event.wheelDeltaY) {
fov -= event.wheelDeltaY * 0.05;
// Opera / Explorer 9
} else if (event.wheelDelta) {
fov -= event.wheelDelta * 0.05;
// Firefox
} else if (event.detail) {
fov += event.detail * 1.0;
}
if (fov < 1 || fov > 55) {
fov = (fov < 1) ? 1 : 55;
}
camera.updateProjectionMatrix();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Panorama2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html{
margin: 0;
padding: 0;
text-align: center;
}
body {
font-size: 18px;
line-height: 1.5em;
position: relative;
width: 100%;
height: 100%;
margin: 40px auto;
padding: 0;
display: inline-block;
/*max-width: 100%;
/*max-width: 1440px;*/
overflow-x: hidden;
}
a{
color: #528CE0;
}
#demo{
/* comment for fixed dimentsions */
position: relative;
width: 1440px;
height: 650px;
margin: 0 auto;
overflow: hidden;
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
#demo:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
#log{
position: absolute;
background: #fff;
padding: 20px;
bottom: 20px;
left: 20px;
width: 150px;
font: normal 12px/18px Monospace, Arial, Helvetical, sans-serif;
text-align: left;
border: 3px double #ddd;
}
#description{
display: inline-block;
width: 100%;
max-width: 600px;
text-align: left;
}
</style>
</head>
<body>
<h1>A panoramic experiment with Three.JS</h1>
<h2>pano2</h2>
<div id="demo">
<div id="log"></div>
</div>
<div id="description">
</div>
<script src="libs/threejs/build/three.min.js"></script>
<script>
"use strict";
var camera,
scene,
element = document.getElementById('demo'), // Inject scene into this
renderer,
onPointerDownPointerX,
onPointerDownPointerY,
onPointerDownLon,
onPointerDownLat,
fov = 45, // Field of View
isUserInteracting = false,
lon = 0,
lat = 0,
phi = 0,
theta = 0,
onMouseDownMouseX = 0,
onMouseDownMouseY = 0,
onMouseDownLon = 0,
onMouseDownLat = 0,
width = 1440, // int || window.innerWidth
height = 650, // int || window.innerHeight
ratio = width / height;
var texture = THREE.ImageUtils.loadTexture('img/pano2.jpg', new THREE.UVMapping(), function() {
init();
animate();
});
function init() {
camera = new THREE.PerspectiveCamera(fov, ratio, 1, 1000);
scene = new THREE.Scene();
var mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40), new THREE.MeshBasicMaterial({map: texture}));
mesh.scale.x = -1;
scene.add(mesh);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
element.appendChild(renderer.domElement);
element.addEventListener('mousedown', onDocumentMouseDown, false);
element.addEventListener('mousewheel', onDocumentMouseWheel, false);
element.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);
window.addEventListener('resize', onWindowResized, false);
onWindowResized(null);
}
function onWindowResized(event) {
// renderer.setSize(window.innerWidth, window.innerHeight);
// camera.projectionMatrix.makePerspective(fov, window.innerWidth / window.innerHeight, 1, 1100);
renderer.setSize(width, height);
camera.projectionMatrix.makePerspective(fov, ratio, 1, 1100);
}
function onDocumentMouseDown(event) {
event.preventDefault();
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
isUserInteracting = true;
element.addEventListener('mousemove', onDocumentMouseMove, false);
element.addEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseMove(event) {
if (fov < 10){
lon = (event.clientX - onPointerDownPointerX) * -0.01 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.01 + onPointerDownLat;
}
else{
lon = (event.clientX - onPointerDownPointerX) * -0.175 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * -0.175 + onPointerDownLat;
}
}
function onDocumentMouseUp(event) {
isUserInteracting = false;
element.removeEventListener('mousemove', onDocumentMouseMove, false);
element.removeEventListener('mouseup', onDocumentMouseUp, false);
}
function onDocumentMouseWheel(event) {
// WebKit
if (event.wheelDeltaY) {
fov -= event.wheelDeltaY * 0.05;
// Opera / Explorer 9
} else if (event.wheelDelta) {
fov -= event.wheelDelta * 0.05;
// Firefox
} else if (event.detail) {
fov += event.detail * 1.0;
}
if (fov < 1 || fov > 55) {
fov = (fov < 1) ? 1 : 55;
}
camera.projectionMatrix.makePerspective(fov, ratio, 1, 1100);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
camera.position.x = 100 * Math.sin(phi) * Math.cos(theta);
camera.position.y = 100 * Math.cos(phi);
camera.position.z = 100 * Math.sin(phi) * Math.sin(theta);
var log = ("x: " + camera.position.x);
log = log + ("<br/>y: " + camera.position.y);
log = log + ("<br/>z: " + camera.position.z);
log = log + ("<br/>fov: " + fov);
document.getElementById('log').innerHTML = log;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
</body>
</html>