table of Contents:
Article Directory
Preface
- When making a personal website, I often encounter a problem, that is, how to make my work dynamically displayed on the homepage
- And this article is to find a solution, use
<embed src="xx.html">tags to introduce the desired results
Code display
Homepage code
<!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>
Code to display the work
Ball movement
<!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();
/*
* 创建网格模型
*/
// 创建一个几何球体对象Geometry
let geometry = new THREE.SphereGeometry(60, 40, 40);
// 材质对象
let material = new THREE.MeshLambertMaterial({
color: 0x0000ff
});
// 网格模型对象Mesh
let 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 width
let width = window.innerWidth;
// window's height
let 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>
Cube rotation
<!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();
/*
* 创建网格模型
*/
// 创建一个立方体几何对象Geometry
let geometry = new THREE.BoxGeometry(100, 100, 100);
// 材质对象
let material = new THREE.MeshLambertMaterial({
color: 0x0000ff
});
// 网格模型对象Mesh
let 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 width
let width = window.innerWidth;
// window's height
let 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>
Result presentation
