<%@ Page Language="C#" CodePage="65001" ContentType="text/html; charset=utf
-8" %>
<!DOCTYPE html>
<html xmlns="http://www
.w3
.org/1
999/xhtml">
<head runat="server">
<meta http
-equiv="Content
-Type" content="text/html; charset=utf
-8" />
<title>3D Water Pump Model V
iewer</title>
<l
ink href="Content/bootstrap
.m
in.css" rel="stylesheet" />
<style type="text/css">
body {
marg
in: 0;
padd
ing: 20px;
background
-color: #f5f5f5;
}
.conta
iner {
max
-width: 1200px;
marg
in: 0 auto;
}
h1 {
text
-align: center;
marg
in-bottom: 30px;
}
#canvas
-conta
iner {
width:
100%;
height: 600px;
border: 2px solid #ddd;
border
-radius: 5px;
marg
in-bottom: 20px;
background
-color: #fff;
overflow: hidden;
}
.button
-group {
text
-align: center;
marg
in-bottom: 20px;
}
.btn {
marg
in: 0
10px;
padd
ing:
10px 20px;
font
-size: 16px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="conta
iner">
<h1>3D Water Pump Model V
iewer</h1>
<div class="button
-group">
<button type="button" id="startBtn" class="btn btn
-success">Start Motor</button>
<button type="button" id="stopBtn" class="btn btn
-danger">Stop Motor</button>
</div>
<div id="canvas
-conta
iner">
<canvas id="myCanvas"></canvas>
</div>
</div>
</form>
<!
-- Include Three
.js library and components as ES modules
-->
<script type="module">
// Import Three
.js modules
import * as THREE from 
9;/Scripts/three
js/three
.module
.js
9;;
import { GLTFLoader } from 
9;/Scripts/three
js/GLTFLoader
.js
9;;
import { OrbitControls } from 
9;/Scripts/three
js/OrbitControls
.js
9;;
//
Initialize Three
.js scene
var scene, camera, renderer, controls, model;
var modelColor = 0xff0000; // Default red color
function
init() {
console
.log(
9;
Initializ
ing Three
.js scene
9;);
// Create scene
scene = new THREE
.Scene();
scene
.background = new THREE
.Color(0xffffff); // White background for better contrast
// Create camera
camera = new THREE
.PerspectiveCamera(60, document
.getElementById(
9;canvas
-conta
iner
9;)
.cl
ientWidth / document
.getElementById(
9;canvas
-conta
iner
9;)
.cl
ientHeight, 0
.1,
1000);
camera
.position
.set(5, 5, 5); // Move camera further away and at an angle
// Create renderer
renderer = new THREE
.WebGLRenderer({ canvas: document
.getElementById(
9;myCanvas
9;), antialias: true });
renderer
.setSize(document
.getElementById(
9;canvas
-conta
iner
9;)
.cl
ientWidth, document
.getElementById(
9;canvas
-conta
iner
9;)
.cl
ientHeight);
renderer
.setPixelRatio(w
indow
.devicePixelRatio);
// Add orbit controls
controls = new OrbitControls(camera, renderer
.domElement);
controls
.enableDamp
ing = true;
controls
.damp
ingFactor = 0
.05;
// Add lights
var amb
ientLight = new THREE
.Amb
ientLight(0xffffff, 0
.5);
scene
.add(amb
ientLight);
var directionalLight = new THREE
.DirectionalLight(0xffffff, 0
.8);
directionalLight
.position
.set(1, 1, 1);
scene
.add(directionalLight);
var directionalLight2 = new THREE
.DirectionalLight(0xffffff, 0
.5);
directionalLight2
.position
.set(
-1,
-1,
-1);
scene
.add(directionalLight2);
// Add a visible grid to help with or
ientation
var gridHelper = new THREE
.GridHelper(
10,
10);
scene
.add(gridHelper);
// Add axes helper
var axesHelper = new THREE
.AxesHelper(5);
scene
.add(axesHelper);
// Add a simple sphere to verify Three
.js is
working
var sphereGeometry = new THREE
.SphereGeometry(1, 32, 32);
var sphereMaterial = new THREE
.MeshStandardMaterial({ color: 0xff0000 });
var sphere = new THREE
.Mesh(sphereGeometry, sphereMaterial);
sphere
.position
.set(0, 0, 0);
scene
.add(sphere);
console
.log(
9;Sphere added to scene
9;);
// Load 3D model
console
.log(
9;Start
ing to load model
...
9;);
var loader = new GLTFLoader();
// First, check if the model file exists
fetch(
9;/3D/shuibneg
.glb
9;)
.then(response => {
if (response
.ok) {
console
.log(
9;Model file exists, start
ing to load
...
9;);
loader
.load(
9;/3D/shuibneg
.glb
9;,
function (gltf) {
console
.log(
9;Model loaded successfully!
9;);
model = gltf
.scene;
// Remove the sphere
scene
.remove(sphere);
// Adjust model size and position
console
.log(
9;Orig
inal model bound
ing box:
9;, new THREE
.Box3()
.setFromObject(model)
.getSize(new THREE
.Vector3()));
// Center the model
const box = new THREE
.Box3()
.setFromObject(model);
const center = box
.getCenter(new THREE
.Vector3());
model
.position
.sub(center);
// Scale model to fit
in v
iew
const size = box
.getSize(new THREE
.Vector3());
const maxDim = Math
.max(size
.x, size
.y, size
.z);
const fov = camera
.fov * (Math
.PI / 180);
let cameraZ = Math
.abs(maxDim / 2 / Math
.tan(fov / 2));
cameraZ *= 1
.5; // Add a little extra space
camera
.position
.set(0, 0, cameraZ);
// Look at model
const m
inZ = box
.m
in.z;
const cameraToFarEdge = (m
inZ < 0) ?
-m
inZ + cameraZ : cameraZ
- m
inZ;
camera
.far = cameraToFarEdge * 3;
camera
.updateProjectionMatrix();
// Apply
initial color
applyColor(model, modelColor);
scene
.add(model);
console
.log(
9;Model added to scene
9;);
},
function (xhr) {
console
.log((xhr
.loaded / xhr
.total *
100) + 
9;% loaded
9;);
},
function (error) {
console
.error(
9;Error load
ing model:
9;, error);
console
.error(
9;Error details:
9;, error
.message, error
.stack);
}
);
} else {
console
.error(
9;Model file
not found:
9;, response
.status);
}
})
.catch(error => {
console
.error(
9;Error check
ing model file:
9;, error);
});
// Handle w
indow resize
w
indow
.addEventListener(
9;resize
9;, onW
indowResize, false);
// Start animation loop
animate();
}
function onW
indowResize() {
camera
.aspect = document
.getElementById(
9;canvas
-conta
iner
9;)
.cl
ientWidth / document
.getElementById(
9;canvas
-conta
iner
9;)
.cl
ientHeight;
camera
.updateProjectionMatrix();
renderer
.setSize(document
.getElementById(
9;canvas
-conta
iner
9;)
.cl
ientWidth, document
.getElementById(
9;canvas
-conta
iner
9;)
.cl
ientHeight);
}
function animate() {
requestAnimationFrame(animate);
controls
.update();
renderer
.render(scene, camera);
}
// Apply color to all materials of the model
function applyColor(object, color) {
object
.traverse(function (child) {
if (child
.isMesh) {
if (child
.material) {
if (Array
.isArray(child
.material)) {
child
.material
.forEach(function (material) {
material
.color
.setHex(color);
});
} else {
child
.material
.color
.setHex(color);
}
}
}
});
}
// Start button click event
document
.getElementById(
9;startBtn
9;)
.addEventListener(
9;click
9;, function () {
modelColor = 0x00ff00; // Green color
if (model) {
applyColor(model, modelColor);
}
});
// Stop button click event
document
.getElementById(
9;stopBtn
9;)
.addEventListener(
9;click
9;, function () {
modelColor = 0xff0000; // Red color
if (model) {
applyColor(model, modelColor);
}
});
//
Initialize when all resources are loaded
w
indow
.addEventListener(
9;load
9;,
init);
</script>
</body>
</html>为什么页面上3d模型无法加载
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
