目录：
文章目录
- 前言
- 代码展示
- 主页代码
- 展示作品的代码
- 球体运动
- 方块旋转
- 结果演示
前言
- 在制作个人网站时，经常遇到一个问题，就是如何让自己的作品动态的显示在主页上
- 而本文就是找到了解决办法，利用
<embed src="xx.html">标签，引入想要的结果
代码展示
主页代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><embed width="770" height="500" src="./sphereOrbit.html"/><embed width="770" height="500" src="./rotate_request.html"/>
</body>
</html>
展示作品的代码
球体运动
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;overflow: hidden;}</style><script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script><script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
</head>
<body><script>/* * 创建场景对象Scene*/let scene = new THREE.Scene();/** 创建网格模型 */// 创建一个几何球体对象Geometrylet geometry = new THREE.SphereGeometry(60, 40, 40);// 材质对象let material = new THREE.MeshLambertMaterial({color: 0x0000ff});// 网格模型对象Meshlet mesh = new THREE.Mesh(geometry, material);// 网格模型添加到场景中scene.add(mesh);/* * 光源设置*/// 点光源let point = new THREE.PointLight(0xffffff);// 点光源位置point.position.set(400, 200, 300);// 点光源添加到场景中scene.add(point);// 环境光let ambient = new THREE.AmbientLight(0x444444);scene.add(ambient);// console.log(scene);/* * 相机设置*/// window's widthlet width = window.innerWidth;// window's heightlet height = window.innerHeight;// 窗口宽高比let k = width / height;// 三维场景显示范围控制系数，系数越大，显示的范围越大let s = 200;// 创建相机let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);// 设置相机的位置camera.position.set(200, 300, 200);// 设置相机方向，指向的场景对象camera.lookAt(scene.position);/* * 创建渲染器对象*/let renderer = new THREE.WebGLRenderer();// 设置渲染区域尺寸renderer.setSize(width, height);// 设置背景颜色renderer.setClearColor(0xb9d3ff, 1);// 向body元素中插入canvas对象，并执行渲染操作document.body.appendChild(renderer.domElement);// 执行渲染function render(){renderer.render(scene, camera);mesh.rotateY(0.01);requestAnimationFrame(render);}render();// 创建控件对象let controls = new THREE.OrbitControls(camera, renderer.domElement); </script>
</body>
</html>方块旋转
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;overflow: hidden;}</style><script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
</head>
<body><script>/* * 创建场景对象Scene*/let scene = new THREE.Scene();/** 创建网格模型 */// 创建一个立方体几何对象Geometrylet geometry = new THREE.BoxGeometry(100, 100, 100);// 材质对象let material = new THREE.MeshLambertMaterial({color: 0x0000ff});// 网格模型对象Meshlet mesh = new THREE.Mesh(geometry, material);// 网格模型添加到场景中scene.add(mesh);/* * 光源设置*/// 点光源let point = new THREE.PointLight(0xffffff);// 点光源位置point.position.set(400, 200, 300);// 点光源添加到场景中scene.add(point);// 环境光let ambient = new THREE.AmbientLight(0x444444);scene.add(ambient);// console.log(scene);/* * 相机设置*/// window's widthlet width = window.innerWidth;// window's heightlet height = window.innerHeight;// 窗口宽高比let k = width / height;// 三维场景显示范围控制系数，系数越大，显示的范围越大let s = 200;// 创建相机let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);// 设置相机的位置camera.position.set(200, 300, 200);// 设置相机方向，指向的场景对象camera.lookAt(scene.position);/* * 创建渲染器对象*/let renderer = new THREE.WebGLRenderer();// 设置渲染区域尺寸renderer.setSize(width, height);// 设置背景颜色renderer.setClearColor(0xb9d3ff, 1);// 向body元素中插入canvas对象，并执行渲染操作document.body.appendChild(renderer.domElement);// 执行requestAnimationFrame函数function render(){renderer.render(scene, camera);mesh.rotateY(0.01);requestAnimationFrame(render);}render();</script>
</body>
</html>结果演示
