three.js画布在一个包含其他内容的较大网页内是一个500 x 500的正方形,我需要鼠标控制相机(用于缩放和旋转对象)才能在鼠标位于500 x 500平方内时发生.
此外,我无法滚动网页,但可能会在我们将鼠标事件监听器与500 x 500画布隔离时修复.
当前代码:
<!DOCTYPE html>
<html>
<head>
<style>
div {
position:relative;
left:100px;
top:100px;
background-color: #eeeeee;
border:1px solid black;
width:500px;
height:500px;
}
canvas {
width:500px;
height:500px;
}
</style>
</head>
<body>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
<script>
var container, camera, scene, renderer, controls;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
var width = container.clientWidth;
var height = container.clientHeight;
camera = new THREE.PerspectiveCamera( 10 , width / height , .1 …任何人都可以生成一个干净的"for dummies "HTML示例,使用STLLoader.js在网页中显示ASCII(非二进制).stl对象文件？结果应该让用户在当前的HTML5浏览器中操作对象,并且没有超出灰度对象表面和背景的花哨视觉效果.
STLLoader.js可能需要three.js或three.min.js的帮助,但我不知道.STLLoader.js包含以下用法示例,但未包含HTML包装器.
STLLoader.js中的用法示例
/**
* Usage:
* var loader = new THREE.STLLoader();
* loader.addEventListener( 'load', function ( event ) {
*
* var geometry = event.content;
* scene.add( new THREE.Mesh( geometry ) );
*
* } );
* loader.load( './models/stl/slotted_disk.stl' );
*/
我正在尝试使用 FileReader 将客户端 ASCII 文件传递给 loader.load() 但看起来该文件永远不会到达那里。该文件会出现在3D场景中，如果我用loader.load('server path to test_file.stl')的不是loader.load(fileObject)。
我包含了一个 alert() 函数来显示文件的 ASCII 文本，它告诉我 JavaScript 正在抓取和处理文件，并且没有 Chrome 安全屏障，但显然我没有正确地将文件传递到loader.load().
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:#fea47c;
}
div {
position:relative;
left:200px;
top:0px;
background-color: #eeeeee;
border:1px solid black;
width:550px;
height:550px;
}
canvas {
width:550px;
height:550px;
}
</style>
</head>
<body>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
<input type="file" id="pickfile"></input>
<script>
document.getElementById('pickfile').addEventListener('change', readFile, false);
function readFile (evt)
{
var fileObject = evt.target.files[0];
var reader = new …我正在尝试添加加载的.stl 3D对象的交互式鼠标控件.我的困难在于集成鼠标控制代码,而不是查找示例或显示对象.以下是我正在使用的内容.我的偏好是用鼠标事件控制摄像机位置(而不是抓住对象上的一个定义点),这样看起来我用鼠标旋转对象并用滚轮放大和缩小.
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - STL</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: #000000;
margin: 0px;
overflow: hidden;
}
a { color: skyblue }
</style>
</head>
<body>
<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
<script>
var container, camera, scene, renderer;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera(
35, // field of view
window.innerWidth / window.innerHeight, // aspect ratio
1 …