大概就是👉在html中写一个3d场景,场景里放一块画板,画板上是一个可以操作的网页,just like this👇
翻遍了csdn和google,有几个人做过这个,但是过程好简陋,我是个笨人,不知道怎么正确引用three.js,并且至今弄不懂vue是什么(。)总之凭借一位大佬八年前的代码,我东凑凑西凑凑终于把它搬到了我的电脑里,如果有什么人八年后需要做这个工作(大概没有x),希望他能在茫茫互联网垃圾中找到我这个垃圾(。)
话不多说下面上代码——有和我一样的笨蛋看到这里应该感到庆幸,因为本人即将给予你保姆级的代码,保证你能打开vscode就一定能用这个代码(大概)(望天)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ADN CSS3D Demo</title>
<style>
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="./assets/libs/three.min.js"></script>
<script src="./assets/libs/TrackballControls.js"></script>
<script src="./assets/libs/CSS3DRenderer.js"></script>
<script>
///
// CSS3DRenderer Demo
// By Philippe Leefsma, July 2015
///
//References:
//http://codereply.com/answer/83pofc/threejs-properly-blending-css3d-webgl.html
//http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/
var controls, camera, glScene, cssScene, glRenderer, cssRenderer;
///
// Creates WebGL Renderer
//
///
function createGlRenderer() {
var glRenderer = new THREE.WebGLRenderer({ alpha: true });
glRenderer.setClearColor(0xECF8FF);
glRenderer.setPixelRatio(window.devicePixelRatio);
glRenderer.setSize(window.innerWidth, window.innerHeight);
glRenderer.domElement.style.position = 'absolute';
glRenderer.domElement.style.zIndex = 1;
glRenderer.domElement.style.top = 0;
glRenderer.domElement.style.pointerEvents = 'none';
return glRenderer;
}
///
// Creates CSS Renderer
//
///
function createCssRenderer() {
var cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
cssRenderer.domElement.style.position = 'absolute';
glRenderer.domElement.style.zIndex = 0;
cssRenderer.domElement.style.top = 0;
return cssRenderer;
}
///
// Creates plane mesh
//
///
function createPlane(w, h, position, rotation) {
var material = new THREE.MeshBasicMaterial({
color: 0x000000,
opacity: 0.0,
side: THREE.DoubleSide
});
var geometry = new THREE.PlaneGeometry(w, h);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = position.x;
mesh.position.y = position.y;
mesh.position.z = position.z;
mesh.rotation.x = rotation.x;
mesh.rotation.y = rotation.y;
mesh.rotation.z = rotation.z;
return mesh;
}
///
// Creates CSS object
//
///
function createCssObject(w, h, position, rotation, url) {
var html = [
'<div style="width:' + w + 'px; height:' + h + 'px;">',
'<iframe src="' + url + '" width="' + w + '" height="' + h + '">',
'</iframe>',
'</div>'
].join('\n');
var div = document.createElement('div');
$(div).html(html);
var cssObject = new THREE.CSS3DObject(div);
cssObject.position.x = position.x;
cssObject.position.y = position.y;
cssObject.position.z = position.z;
cssObject.rotation.x = rotation.x;
cssObject.rotation.y = rotation.y;
cssObject.rotation.z = rotation.z;
return cssObject;
}
///
// Creates 3d webpage object
//
///
function create3dPage(w, h, position, rotation, url) {
var plane = createPlane(
w, h,
position,
rotation);
glScene.add(plane);
var cssObject = createCssObject(
w, h,
position,
rotation,
url);
cssScene.add(cssObject);
}
///
// Creates material with random color
//
///
function createColoredMaterial() {
var material = new THREE.MeshBasicMaterial({
color: Math.floor(Math.random() * 16777215),
shading: THREE.FlatShading,
side: THREE.DoubleSide
});
return material;
}
///
// Creates 3D geometry to place in the scene
//
///
function create3dGeometry() {
var mesh1 = new THREE.Mesh(
new THREE.CylinderGeometry(0, 200, 300, 20, 4),
createColoredMaterial());
mesh1.position.x = 0;
mesh1.position.y = -300;
mesh1.position.z = 400;
glScene.add(mesh1);
var mesh2 = new THREE.Mesh(
new THREE.BoxGeometry(200, 200, 200),
createColoredMaterial());
mesh2.position.x = -300;
mesh2.position.y = -300;
mesh2.position.z = 400;
glScene.add(mesh2);
var mesh3 = new THREE.Mesh(
new THREE.SphereGeometry(100, 128, 128),
createColoredMaterial());
mesh3.position.x = 500;
mesh3.position.y = -300;
mesh3.position.z = 400;
glScene.add(mesh3);
}
///
// Initializes scene
//
///
function initialize() {
camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
10000);
camera.position.set(0, 100, 3000);
controls = new THREE.TrackballControls(camera);
glRenderer = createGlRenderer();
cssRenderer = createCssRenderer();
//document.body.appendChild(glRenderer.domElement);
document.body.appendChild(cssRenderer.domElement);
cssRenderer.domElement.appendChild(glRenderer.domElement);
glScene = new THREE.Scene();
cssScene = new THREE.Scene();
var ambientLight = new THREE.AmbientLight(0x555555);
glScene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(-.5, .5, -1.5).normalize();
glScene.add(directionalLight);
create3dPage(
1000, 1000,
new THREE.Vector3(-1050, 0, 400),
new THREE.Vector3(0, 45 * Math.PI / 180, 0),
'https://bbs.saraba1st.com/2b/forum-6-1.html');
create3dPage(
1000, 1000,
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 0, 0),
'https://seaside-station.com/');
create3dPage(
1000, 1000,
new THREE.Vector3(1050, 0, 400),
new THREE.Vector3(0, -45 * Math.PI / 180, 0),
'https://www.meteorshowers.org/view/Lyrids');
create3dGeometry();
update();
}
///
// Updates scene
//
///
function update() {
controls.update();
glRenderer.render(glScene, camera);
cssRenderer.render(cssScene, camera);
requestAnimationFrame(update);
}
///
// On document ready
//
///
$(document).ready(function () {
initialize();
});
</script>
</body>
</html>
three.min.js
TrackballControls.js
CSS3DRenderer.js
敲黑板重点!!
以上三个文件请前往three.js的Github主页,找到2015年的r71,链接在此https://github.com/mrdoob/three.js/tags?after=r79
然后下载zip包,解压时可能会提醒你文件已损坏,但不要紧,你一样可以在里面找到以上三个文件!
- three.min.js在build文件夹中
- TrackballControls.js在examples/js/controls中
- CSS3DRenderer.js在examples/js/renderers中
最后把他们仨放进你项目下的assets/libs/(这个主要看你自己的项目结构)
再安装一个名为live server的扩展,你就可以在自己的电脑上成功运行出正确的结果啦★,°:.☆( ̄▽ ̄)/$:.°★ 。文章来源:https://www.toymoban.com/news/detail-692264.html
以下是一些我参考过的大佬的文章,也许会对看到这里的你有所帮助
http://t.csdn.cn/WJwyy
http://t.csdn.cn/Y9IYC
https://adndevblog.typepad.com/cloud_and_mobile/2015/07/embedding-webpages-in-a-3d-threejs-scene.html
https://github.com/jeromeetienne/threex.htmlmixer文章来源地址https://www.toymoban.com/news/detail-692264.html
到了这里,关于three.js嵌入可交互的普通页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!