我是新手three.js,我需要帮助 我的页面有导航栏和threejs conteiner
#navcontainer
{
position:fixed;
display: block;
background-color: #303b47;
z-index:100;
position:absolute;
}
navbar有一个搜索输入表单:
<input id="searchbt" type="text" placeholder="Search" >
风格:
#searchbt{
background: #29333d url(../img/Search.png) left no-repeat;
padding-left: 20px;
border-radius: 0px;
border-style:none;
width:200px;
height:66px;
color:#fff;
}
threejs conteiner:
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
//var container, stats;
var camera, controls, scene, renderer, projector;
var cross;
var posN = 80;
init();
animate();
function init() {
var container = document.getElementById("threejs");//ищем элемент co
camera = new THREE.PerspectiveCamera( 90,container.clientWidth / container.clientHeight, 0.1, 2000 );
camera.position.z = posN;
controls = new THREE.OrbitControls (camera );
controls.addEventListener( 'change', render );
scene = new THREE.Scene();
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( manager );
loader.load( './kos.jpg', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
} );
// model
var loader = new THREE.OBJLoader( manager );
loader.load( './skull.obj', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
object.position.y = 10;
scene.add( object );
} );
//
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );
light = new THREE.AmbientLight( 0xffffff );
scene.add( light );
// Picking stuff
// projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setSize(container.clientWidth , container.clientHeight);
container.appendChild(renderer.domElement);
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize( container.clientWidth , container.clientHeight );
render();
}
function animate() {
requestAnimationFrame( animate );
controls.update();
}
function render() {
camera.updateMatrixWorld();
renderer.render( scene, camera );
}
包括如何
<div id="threejs" style="">
<script type="text/javascript" src="js/model.js">
式:
#threejs{
width:100%;
height:500px;
top:100px;
position: absolute;
z-index: 25px;
}
在搜索栏上找到鼠标时,它突出但不起作用(不输入信息) Mby任何人都知道......这是怎么回事?