0
私のthree.jsスケッチにHTMLテキストをオーバーレイしようとしていますが、Z-インデックスを変更しても何も変わりません。私はinnerHTMLを使うことができることを知っていますが、onclick属性を使用する必要があります。この問題の主なトピックではない問題が発生します。three.jsレンダラーでHTMLテキストをオーバーレイする
私はCSS3Dレンダラーを使用していますが、HTMLコンテンツを横に表示したいと思いますが、パッディング値を変更すると全身がちょうどテキストだけでなく下がります。
このような修正が可能かどうかは誰にもわかりますか？
EDIT：
// WebGL renderer2
renderer2= new THREE.WebGLRenderer({ antialias: true });
renderer2.setClearColor(0xffffff, 1.0)
renderer2.setSize(window.innerWidth, window.innerHeight);
//renderer2.domElement.style.position = 'relative';
renderer2.domElement.style.zIndex = '-1';
document.body.appendChild(renderer2.domElement);
私はCSS3DとWebGLのは、同じページに一度にロードされますように、しかし、相対的にそれらの位置の両方を変更すると、別のレンダラを追加することにしましたいくつかのさらなる調査の後、彼らは終わります私は2つのキャンバスを持っています。理想的には、それらを積み重ねて横に並べる必要があります。
<!DOCTYPE html>
<html>
<head>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
background-color: white;
}
.text{
z-index: 99;
padding-top: 5%;
}
.large {
font-size: xx-large;
}
</style>
</head>
<body>
<div class="text">
<p>Lorem Ipsum</p>
</div>
<script>
var string = '<div>' +
'<h1>A test CSS3D example.</h1>' +
'<span class="large">this is an input example</span>' +
'<textarea> Try adding text here</textarea>' +
'</div>';
// global variables
var renderer;
var scene;
var camera;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
renderer = new THREE.CSS3DRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.zIndex= '1';
camera.position.x = 500;
camera.position.y = 500;
camera.position.z = 500;
camera.lookAt(scene.position);
document.body.appendChild(renderer.domElement);
var cssElement = createCSS3DObject(string);
cssElement.position.set(100, 100, 100);
scene.add(cssElement);
render();
}
function createCSS3DObject(s) {
var wrapper = document.createElement('div');
wrapper.innerHTML = s;
var div = wrapper.firstChild;
div.style.width = '370px';
div.style.height = '300px';
div.style.transform = 'rotate(70deg)';
div.style.opacity = 0.7;
div.style.background = new THREE.Color(Math.random() * 0xffffff).getStyle();
var object = new THREE.CSS3DObject(div);
return object;
}
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
window.onload = init;
</script>
</body>
</html>
あなたのthree.jsシーンは、絶対位置にあるように見えます。これはそれをすべての前に置く。 –
ありがとう、シーンの相対とテキストを絶対に変更しました。素晴らしい仕事、少し恥ずかしいこと、私はこれほど簡単なことを見落としてしまった。 – Sasquatchas
しかし、シーンに別のレンダラーを追加しようとすると、もうちょうどもう一度やり直してみると、終わりそうにないようです。 – Sasquatchas