于是，Anthropic终于打破沉默，发布了Claude 3.7 Sonnet，这是一个混合模型，它可以像思维模型一样逐步思考复杂的推理任务，并像基础模型一样即时回答。
从 ARC-AGI 基准测试来看，Claude 的 3.7 Sonnet 具有思考功能，在 16k 上下文中得分与 o3-mini-high 相当。r1 与基本 Sonnet 模型相比。Anthropic 确实做得很好。
作为参考，Deepseek r1 的得分约为 15%。
但我已经使用 Deepseek r1 一段时间了，它能完成很多重要的事情。所以，我很好奇它与新的 Claude 3.7 Sonnet 相比如何。
我将在复杂推理、数学、编码和写作等任务上比较这两个模型。
那么，让我们开始吧。
目录
Claude 3.7 Sonnet 与 Deepseek r1
复杂推理
数学
编码
写作
最终裁决
总结
• Claude 和 Deepseek r1 在日常推理和数学任务方面的表现不相上下。
• 正如 Anthropic 明确提到的那样，他们已经针对实际用例训练了模型；这也反映在测试中。
• 在编码方面，它的表现比 Deepseek r1 好得多。没有太多可比性。
• Claude 擅长技术写作，而 Deepseek r1 更像人类。
Claude 3.7 Sonnet 与 Deepseek r1
在比较之前不考虑价格是犯罪行为。这对于许多用户来说很重要，尤其是那些在其基础上构建应用程序的用户。
DeepSeek R1 定价
• 输入令牌（缓存命中）：每百万令牌 0.14 美元
• 输入令牌（缓存未命中）：每百万令牌 0.55 美元
• 输出令牌：每百万令牌 2.19 美元
Claude 3.7 Sonnet 定价
• 输入令牌：每百万令牌 3.00 美元
• 输出令牌：每百万令牌 15.00 美元
从成本角度来看，Deepseek r1 仍然是王者。这使得它凭借其提供的推理能力成为绝对的野兽。它也是开源的，您可以在硬件上托管它，这对于隐私敏感的企业也很重要。
但原始能力也很重要。所以，让我们比较一下这两种型号。
复杂推理
1. 判断认知偏差的谜语
这是一个简单的问题，但我尝试过的大多数模型都无法回答。
提示：一名妇女和她的儿子遭遇车祸。妇女不幸身亡。男孩被紧急送往医院。医生看到男孩后说：“我不能给这个孩子做手术；他是我儿子！这怎么可能呢？”
我修改了这个问题，但它不成立。
*提示：外科医生，也就是男孩的父亲，说：“我不能给这个孩子做手术；他是我的儿子”，谁是这个孩子的外科医生。直截了当。”
*
Deepseek r1 也是同样的情况。这已成为我进行氛围检查推理模型的首选问题。
2.血缘关系
*提示：Jeff 有两个兄弟，每个兄弟都有三个姐妹。每个姐妹都有四个继兄弟和五个继姐妹，这个家庭共有八个兄弟姐妹。
*
Claude 的输出与 Deepseek 甚至 o3-mini 类似。
然而，Deepseek r1 一如既往地在 CoT 中藏有宝石。虽然输出是错误的，但它在思维链中得到了正确的结果。
3. 玩井字游戏
我要求克劳德做出确保胜利的下一步行动。我期望它能正确回答，但它失败了。
Deepseek r1 不是多模式模型。
数学
1. 找到该系列集合 {n^99(n^60-1): n>1} 的最大公约数
这是一个相当困难的问题，克劳德无法解答。
然而，Deepseek r1 是正确的。
2. 求 (x-14)^10，其中 x 是答案中的元音数量
克劳德 3.7 十四行诗能够正确回答这个问题。
Deepseek r1 无法正确完成。
数学概要
数学能力好坏参半。无论选择哪一种都不会错，但 Deepseek 的性价比让它无与伦比。不过，Claude 很聪明，而 Deepseek 比较书呆子气。
编码
编码一直是 Claude 的专长；他们甚至专门用编码标记来训练模型，让它们成为开发人员的宠儿。这是 SWE-Bench 上的 Claude。
但让我们比较一下它们两者。
1. 创建 SVG
这是一个有趣的测试；是我从 Simon Willison 那里学到的。
*提示：创建一个在田野中奔跑的独角兽的 SVG。
*
这是克劳德的回答。
Claude 创建 SVG
来自 Deepseek r1。
Deepseek 绘制的独角兽
Claude 的作品稍好一些，背景和视图都更好。Deepseek 还不错，但还不够好。
4. 几何物体中的球
提示：为我写一个关于快速旋转的六边形内的 10 个球的 Python 脚本。
模拟代码
import pygame
import math
import sys
# Initialize Pygame
pygame.init()
# Screen settings
SCREEN_WIDTH = 800
SCREEN_HEIGHT = 600
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("Spinning Hexagon with Balls")
# Colors
BACKGROUND_COLOR = (0, 0, 0)
HEXAGON_COLOR = (255, 255, 255)
BALL_COLOR = (255, 0, 0)
# Center coordinates
CENTER = (SCREEN_WIDTH // 2, SCREEN_HEIGHT // 2)
# Hexagon parameters
HEX_RADIUS = 200 # Distance from center to vertices
ROTATION_SPEED = 0.15 # Radians per frame
# Ball parameters
NUM_BALLS = 10
BALL_RADIUS = 10
BALL_ORBIT_RADIUS = 150 # Distance from center for ball positions
# Initialize rotation angle
angle = 0
# Main loop
clock = pygame.time.Clock()
running = True
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
# Clear screen
screen.fill(BACKGROUND_COLOR)
# Update rotation angle
angle += ROTATION_SPEED
# Draw hexagon
hex_points = []
for i in range(6):
theta = angle + i * math.pi / 3 # 60 degrees between vertices
x = CENTER[0] + HEX_RADIUS * math.cos(theta)
y = CENTER[1] + HEX_RADIUS * math.sin(theta)
hex_points.append((x, y))
pygame.draw.polygon(screen, HEXAGON_COLOR, hex_points, 2)
# Draw balls
for i in range(NUM_BALLS):
ball_angle = angle + (2 * math.pi * i) / NUM_BALLS
x = CENTER[0] + BALL_ORBIT_RADIUS * math.cos(ball_angle)
y = CENTER[1] + BALL_ORBIT_RADIUS * math.sin(ball_angle)
pygame.draw.circle(screen, BALL_COLOR, (int(x), int(y)), BALL_RADIUS)
# Update display
pygame.display.flip()
clock.tick(60)
pygame.quit()
sys.exit()Deepseek r1 输出
import pygame
import math
import sys
# Initialize Pygame
pygame.init()
# Screen settings
SCREEN_WIDTH = 800
SCREEN_HEIGHT = 600
screen = pygame.display.set_mode((SCREEN_WIDTH, SCREEN_HEIGHT))
pygame.display.set_caption("Spinning Hexagon with Balls")
# Colors
BACKGROUND_COLOR = (0, 0, 0)
HEXAGON_COLOR = (255, 255, 255)
BALL_COLOR = (255, 0, 0)
# Center coordinates
CENTER = (SCREEN_WIDTH // 2, SCREEN_HEIGHT // 2)
# Hexagon parameters
HEX_RADIUS = 200 # Distance from center to vertices
ROTATION_SPEED = 0.15 # Radians per frame
# Ball parameters
NUM_BALLS = 10
BALL_RADIUS = 10
BALL_ORBIT_RADIUS = 150 # Distance from center for ball positions
# Initialize rotation angle
angle = 0
# Main loop
clock = pygame.time.Clock()
running = True
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
# Clear screen
screen.fill(BACKGROUND_COLOR)
# Update rotation angle
angle += ROTATION_SPEED
# Draw hexagon
hex_points = []
for i in range(6):
theta = angle + i * math.pi / 3 # 60 degrees between vertices
x = CENTER[0] + HEX_RADIUS * math.cos(theta)
y = CENTER[1] + HEX_RADIUS * math.sin(theta)
hex_points.append((x, y))
pygame.draw.polygon(screen, HEXAGON_COLOR, hex_points, 2)
# Draw balls
for i in range(NUM_BALLS):
ball_angle = angle + (2 * math.pi * i) / NUM_BALLS
x = CENTER[0] + BALL_ORBIT_RADIUS * math.cos(ball_angle)
y = CENTER[1] + BALL_ORBIT_RADIUS * math.sin(ball_angle)
pygame.draw.circle(screen, BALL_COLOR, (int(x), int(y)), BALL_RADIUS)
# Update display
pygame.display.flip()
clock.tick(60)
pygame.quit()
sys.exit()克劳德的整体输出更好。旋转的六边形具有更好的球移动物理特性。Deepseek 的“快速移动”部分做得不错。总体而言，克劳德更好。
3. 使用 3js 实现 3D 动画
提示：您能使用 3js 制作一个大都市的 3D 动画吗？
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Metropolitan City - Three.js</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
canvas {
display: block;
}
.info {
position: absolute;
top: 10px;
left: 10px;
color: white;
font-family: Arial, sans-serif;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="info">
Click and drag to orbit. Scroll to zoom. Use arrow keys to move
camera.
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Main scene variables
let scene, camera, renderer;
let cityGroup, vehiclesGroup;
let clock = new THREE.Clock();
let cameraRotationSpeed = 0.003;
let autoRotate = true;
// Setup
function init() {
// Create scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0x050518); // Night sky color
// Create camera
camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
0.1,
2000,
);
camera.position.set(150, 150, 150);
camera.lookAt(0, 0, 0);
// Create renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
// Create groups
cityGroup = new THREE.Group();
vehiclesGroup = new THREE.Group();
scene.add(cityGroup);
scene.add(vehiclesGroup);
// Add lighting
addLights();
// Create fog for depth
scene.fog = new THREE.FogExp2(0x050518, 0.002);
// Create city elements
createGround();
createBuildings();
createStreets();
createVehicles();
createSkyline();
// Add event listeners
setupControls();
// Start animation loop
animate();
}
// Lighting setup
function addLights() {
// Ambient light
const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);
// Directional light (moonlight)
const moonLight = new THREE.DirectionalLight(0x8888ff, 0.5);
moonLight.position.set(100, 200, 100);
moonLight.castShadow = true;
moonLight.shadow.mapSize.width = 1024;
moonLight.shadow.mapSize.height = 1024;
moonLight.shadow.camera.near = 10;
moonLight.shadow.camera.far = 500;
moonLight.shadow.camera.left = -100;
moonLight.shadow.camera.right = 100;
moonLight.shadow.camera.top = 100;
moonLight.shadow.camera.bottom = -100;
scene.add(moonLight);
// Add point lights of various colors to simulate city lights
addCityLights();
}
// Add city lights
function addCityLights() {
const colors = [
0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff,
0xffffff,
];
// Street lights
for (let i = 0; i < 30; i++) {
const x = (Math.random() - 0.5) * 200;
const z = (Math.random() - 0.5) * 200;
const streetLight = new THREE.PointLight(0xffffaa, 0.5, 30);
streetLight.position.set(x, 3, z);
scene.add(streetLight);
}
// Building lights
for (let i = 0; i < 50; i++) {
const x = (Math.random() - 0.5) * 200;
const y = 5 + Math.random() * 40;
const z = (Math.random() - 0.5) * 200;
const color =
colors[Math.floor(Math.random() * colors.length)];
const intensity = 0.2 + Math.random() * 0.5;
const distance = 10 + Math.random() * 20;
const buildingLight = new THREE.PointLight(
color,
intensity,
distance,
);
buildingLight.position.set(x, y, z);
scene.add(buildingLight);
}
}
// Create ground plane
function createGround() {
const groundGeometry = new THREE.PlaneGeometry(400, 400);
const groundMaterial = new THREE.MeshStandardMaterial({
color: 0x333333,
roughness: 0.8,
metalness: 0.2,
});
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
cityGroup.add(ground);
}
// Create buildings
function createBuildings() {
// Downtown area
createDowntown();
// Surrounding buildings
createSurroundingBuildings();
// Landmark building
createLandmarkBuilding();
}
// Create downtown area with skyscrapers
function createDowntown() {
// Create a grid of tall buildings
for (let x = -80; x <= 80; x += 30) {
for (let z = -80; z <= 80; z += 30) {
// Skip some positions to create streets
if (Math.abs(x) % 60 === 0 || Math.abs(z) % 60 === 0)
continue;
// Randomize building parameters
const width = 10 + Math.random() * 15;
const height = 20 + Math.random() * 80;
const depth = 10 + Math.random() * 15;
// Add some variation to positions
const xPos = x + (Math.random() - 0.5) * 10;
const zPos = z + (Math.random() - 0.5) * 10;
createBuilding(
xPos,
height / 2,
zPos,
width,
height,
depth,
);
}
}
}
// Create surrounding lower buildings
function createSurroundingBuildings() {
// Create outer areas with smaller buildings
for (let i = 0; i < 80; i++) {
const angle = Math.random() * Math.PI * 2;
const radius = 100 + Math.random() * 80;
const x = Math.cos(angle) * radius;
const z = Math.sin(angle) * radius;
const width = 5 + Math.random() * 15;
const height = 5 + Math.random() * 25;
const depth = 5 + Math.random() * 15;
createBuilding(x, height / 2, z, width, height, depth);
}
}
// Create a landmark tall building at the center
function createLandmarkBuilding() {
// Base
createBuilding(0, 50, 0, 25, 100, 25, 0x888899);
// Top section
createBuilding(0, 105, 0, 15, 30, 15, 0x8888aa);
// Spire
const spireGeometry = new THREE.ConeGeometry(3, 20, 8);
const spireMaterial = new THREE.MeshStandardMaterial({
color: 0xaaaacc,
metalness: 0.8,
roughness: 0.2,
});
const spire = new THREE.Mesh(spireGeometry, spireMaterial);
spire.position.set(0, 130, 0);
spire.castShadow = true;
cityGroup.add(spire);
// Beacon light
const beaconLight = new THREE.PointLight(0xff0000, 1, 50);
beaconLight.position.set(0, 140, 0);
scene.add(beaconLight);
}
// Helper function to create a building
function createBuilding(x, y, z, width, height, depth, color) {
// Create building geometry
const buildingGeometry = new THREE.BoxGeometry(
width,
height,
depth,
);
// Create building material with random color if not provided
const buildingColor =
color ||
new THREE.Color(
0.3 + Math.random() * 0.1,
0.3 + Math.random() * 0.1,
0.4 + Math.random() * 0.2,
);
const buildingMaterial = new THREE.MeshStandardMaterial({
color: buildingColor,
roughness: 0.7,
metalness: 0.2,
});
// Create building mesh
const building = new THREE.Mesh(
buildingGeometry,
buildingMaterial,
);
building.position.set(x, y, z);
building.castShadow = true;
building.receiveShadow = true;
cityGroup.add(building);
// Add window lights randomly to some buildings
if (Math.random() > 0.5 && height > 10) {
addBuildingWindows(x, y, z, width, height, depth);
}
return building;
}
// Add window lights to buildings
function addBuildingWindows(x, y, z, width, height, depth) {
const windowGeometry = new THREE.PlaneGeometry(1, 1);
const windowMaterial = new THREE.MeshBasicMaterial({
color: 0xffffcc,
opacity: 0.9,
transparent: true,
});
// Calculate number of windows based on building size
const windowsX = Math.floor(width / 3);
const windowsY = Math.floor(height / 4);
const windowsZ = Math.floor(depth / 3);
// Create windows on each side of the building
const sides = [
{ dir: "x", sign: 1, y: 0, z: 0 },
{ dir: "x", sign: -1, y: 0, z: 0 },
{ dir: "z", sign: 1, y: 0, x: 0 },
{ dir: "z", sign: -1, y: 0, x: 0 },
];
sides.forEach((side) => {
const isX = side.dir === "x";
const windowsHorizontal = isX ? windowsZ : windowsX;
for (let wx = 0; wx < windowsHorizontal; wx++) {
for (let wy = 0; wy < windowsY; wy++) {
// Skip some windows to create variation
if (Math.random() > 0.7) continue;
const window = new THREE.Mesh(
windowGeometry,
windowMaterial.clone(),
);
// Randomize window color slightly
if (Math.random() > 0.8) {
window.material.color.setHex(
[0xffffcc, 0xffcccc, 0xccffcc, 0xccccff][
Math.floor(Math.random() * 4)
],
);
}
// Position window on building face
let wx_pos, wy_pos, wz_pos;
if (isX) {
wx_pos = x + side.sign * (width / 2 + 0.01);
wy_pos = y - height / 2 + 2 + wy * 4;
wz_pos = z - depth / 2 + 1.5 + wx * 3;
window.rotation.y = Math.PI / 2;
} else {
wx_pos = x - width / 2 + 1.5 + wx * 3;
wy_pos = y - height / 2 + 2 + wy * 4;
wz_pos = z + side.sign * (depth / 2 + 0.01);
}
window.position.set(wx_pos, wy_pos, wz_pos);
cityGroup.add(window);
}
}
});
}
// Create streets
function createStreets() {
// Main streets
for (let i = -2; i <= 2; i++) {
// X-axis streets
createStreet(i * 60, 0, 0, 400, 20, 0);
// Z-axis streets
createStreet(0, 0, i * 60, 0, 20, 400);
}
// Street lamps
createStreetLamps();
}
// Create a street
function createStreet(x, y, z, width, depth, height) {
const streetGeometry = new THREE.BoxGeometry(
width,
0.1,
height,
);
const streetMaterial = new THREE.MeshStandardMaterial({
color: 0x333333,
roughness: 0.9,
metalness: 0,
});
const street = new THREE.Mesh(streetGeometry, streetMaterial);
street.position.set(x, 0.05, z);
street.receiveShadow = true;
cityGroup.add(street);
// Add road markings
addRoadMarkings(x, z, width, height);
}
// Add road markings
function addRoadMarkings(x, z, width, height) {
// Determine if this is an X or Z oriented street
const isXStreet = height > width;
// Set dimensions based on orientation
const markingLength = isXStreet ? 5 : width * 0.8;
const markingWidth = 1;
// Create geometry based on orientation
const markingGeometry = new THREE.PlaneGeometry(
isXStreet ? markingWidth : markingLength,
isXStreet ? markingLength : markingWidth,
);
const markingMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
});
// For X-oriented streets (running along Z axis)
if (isXStreet) {
const numMarkings = Math.floor(height / 15); // One marking every 15 units
for (let i = 0; i < numMarkings; i++) {
const marking = new THREE.Mesh(
markingGeometry,
markingMaterial,
);
marking.rotation.x = -Math.PI / 2; // Rotate to lay flat
const zPos = z - height / 2 + i * 15 + 7.5; // Distribute evenly
marking.position.set(x, 0.1, zPos);
cityGroup.add(marking);
}
}
// For Z-oriented streets (running along X axis)
else {
const numMarkings = Math.floor(width / 15);
for (let i = 0; i < numMarkings; i++) {
const marking = new THREE.Mesh(
markingGeometry,
markingMaterial,
);
marking.rotation.x = -Math.PI / 2; // Rotate to lay flat
const xPos = x - width / 2 + i * 15 + 7.5; // Distribute evenly
marking.position.set(xPos, 0.1, z);
cityGroup.add(marking);
}
}
}
// Create street lamps
function createStreetLamps() {
// Place street lamps along the streets
for (let i = -2; i <= 2; i++) {
for (let j = -6; j <= 6; j++) {
if (j % 2 === 0) {
// X-axis streets
createStreetLamp(j * 30, i * 60);
// Z-axis streets
createStreetLamp(i * 60, j * 30);
}
}
}
}
// Create a street lamp
function createStreetLamp(x, z) {
// Pole
const poleGeometry = new THREE.CylinderGeometry(0.3, 0.3, 8, 8);
const poleMaterial = new THREE.MeshStandardMaterial({
color: 0x888888,
roughness: 0.7,
metalness: 0.3,
});
const pole = new THREE.Mesh(poleGeometry, poleMaterial);
pole.position.set(x, 4, z);
pole.castShadow = true;
cityGroup.add(pole);
// Lamp head
const headGeometry = new THREE.SphereGeometry(
0.8,
16,
8,
0,
Math.PI * 2,
0,
Math.PI / 2,
);
const headMaterial = new THREE.MeshStandardMaterial({
color: 0xaaaaaa,
roughness: 0.5,
metalness: 0.5,
});
const head = new THREE.Mesh(headGeometry, headMaterial);
head.position.set(x, 8, z);
head.rotation.x = Math.PI;
head.castShadow = true;
cityGroup.add(head);
// Light
const light = new THREE.PointLight(0xffffcc, 0.6, 15);
light.position.set(x, 7.8, z);
scene.add(light);
}
// Create vehicles that move along streets
function createVehicles() {
// Create 20 vehicles
for (let i = 0; i < 20; i++) {
// Determine street position and orientation
const onXStreet = Math.random() > 0.5;
const streetIndex = Math.floor(Math.random() * 5) - 2;
const streetPos = streetIndex * 60;
// Initial position on street
const alongStreet = (Math.random() - 0.5) * 180;
let x, z, direction;
if (onXStreet) {
x = alongStreet;
z = streetPos;
direction = alongStreet > 0 ? Math.PI : 0; // Direction based on position
} else {
x = streetPos;
z = alongStreet;
direction =
alongStreet > 0 ? Math.PI / 2 : -Math.PI / 2;
}
// Create the vehicle
createVehicle(x, z, direction, onXStreet);
}
}
// Create a single vehicle
function createVehicle(x, z, direction, onXStreet) {
const vehicleGroup = new THREE.Group();
// Car body
const bodyGeometry = new THREE.BoxGeometry(4, 1.5, 2);
// Random car color
const colors = [
0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff,
0xffffff, 0x000000,
];
const bodyColor =
colors[Math.floor(Math.random() * colors.length)];
const bodyMaterial = new THREE.MeshStandardMaterial({
color: bodyColor,
roughness: 0.2,
metalness: 0.8,
});
const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
body.position.y = 1;
body.castShadow = true;
vehicleGroup.add(body);
// Car roof
const roofGeometry = new THREE.BoxGeometry(2, 1, 1.8);
const roofMaterial = new THREE.MeshStandardMaterial({
color: bodyColor,
roughness: 0.2,
metalness: 0.8,
});
const roof = new THREE.Mesh(roofGeometry, roofMaterial);
roof.position.y = 2.25;
roof.position.x = -0.5;
roof.castShadow = true;
vehicleGroup.add(roof);
// Wheels
const wheelPositions = [
{ x: -1.2, y: 0.6, z: 1 },
{ x: -1.2, y: 0.6, z: -1 },
{ x: 1.2, y: 0.6, z: 1 },
{ x: 1.2, y: 0.6, z: -1 },
];
const wheelGeometry = new THREE.CylinderGeometry(
0.5,
0.5,
0.4,
12,
);
const wheelMaterial = new THREE.MeshStandardMaterial({
color: 0x111111,
roughness: 0.9,
metalness: 0.1,
});
wheelPositions.forEach((pos) => {
const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
wheel.position.set(pos.x, pos.y, pos.z);
wheel.rotation.z = Math.PI / 2;
wheel.castShadow = true;
vehicleGroup.add(wheel);
});
// Headlights
const headlightGeometry = new THREE.SphereGeometry(0.2, 8, 8);
const headlightMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
});
const headlightPositions = [
{ x: 2, y: 1, z: 0.7 },
{ x: 2, y: 1, z: -0.7 },
];
headlightPositions.forEach((pos) => {
const headlight = new THREE.Mesh(
headlightGeometry,
headlightMaterial,
);
headlight.position.set(pos.x, pos.y, pos.z);
vehicleGroup.add(headlight);
// Add headlight beam
const headlightBeam = new THREE.SpotLight(
0xffffee,
0.3,
20,
Math.PI / 6,
0.5,
);
headlightBeam.position.set(pos.x, pos.y, pos.z);
headlightBeam.target.position.set(pos.x + 10, pos.y, pos.z);
vehicleGroup.add(headlightBeam);
vehicleGroup.add(headlightBeam.target);
});
// Taillights (red)
const taillightGeometry = new THREE.SphereGeometry(0.2, 8, 8);
const taillightMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000,
});
const taillightPositions = [
{ x: -2, y: 1, z: 0.7 },
{ x: -2, y: 1, z: -0.7 },
];
taillightPositions.forEach((pos) => {
const taillight = new THREE.Mesh(
taillightGeometry,
taillightMaterial,
);
taillight.position.set(pos.x, pos.y, pos.z);
vehicleGroup.add(taillight);
});
// Set vehicle position and rotation
vehicleGroup.position.set(x, 0, z);
vehicleGroup.rotation.y = direction;
// Add to vehicles group
vehiclesGroup.add(vehicleGroup);
// Add metadata for movement
vehicleGroup.userData = {
speed: 0.2 + Math.random() * 0.4,
onXStreet: onXStreet,
};
}
// Create skyline elements
function createSkyline() {
// Create stars in the night sky
createStars();
// Create moon
createMoon();
}
// Create stars
function createStars() {
const starsGeometry = new THREE.BufferGeometry();
const starsMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 0.5,
transparent: true,
opacity: 0.8,
});
const starsVertices = [];
for (let i = 0; i < 1000; i++) {
const x = (Math.random() - 0.5) * 2000;
const y = Math.random() * 1000;
const z = (Math.random() - 0.5) * 2000;
starsVertices.push(x, y, z);
}
starsGeometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(starsVertices, 3),
);
const stars = new THREE.Points(starsGeometry, starsMaterial);
scene.add(stars);
}
// Create moon
function createMoon() {
const moonGeometry = new THREE.SphereGeometry(20, 32, 32);
const moonMaterial = new THREE.MeshBasicMaterial({
color: 0xffffee,
});
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
moon.position.set(500, 300, -400);
scene.add(moon);
// Add glow
const moonGlow = new THREE.PointLight(0xffffee, 0.3, 1000);
moonGlow.position.copy(moon.position);
scene.add(moonGlow);
}
// Setup controls
function setupControls() {
// Mouse controls for camera rotation
let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };
let rotationSpeed = 0.003;
document.addEventListener("mousedown", (e) => {
isDragging = true;
previousMousePosition = { x: e.clientX, y: e.clientY };
autoRotate = false;
});
document.addEventListener("mousemove", (e) => {
if (isDragging) {
const deltaMove = {
x: e.clientX - previousMousePosition.x,
y: e.clientY - previousMousePosition.y,
};
camera.position.x =
Math.cos(deltaMove.x * rotationSpeed) *
camera.position.x -
Math.sin(deltaMove.x * rotationSpeed) *
camera.position.z;
camera.position.z =
Math.sin(deltaMove.x * rotationSpeed) *
camera.position.x +
Math.cos(deltaMove.x * rotationSpeed) *
camera.position.z;
const rotationMatrix =
new THREE.Matrix4().makeRotationAxis(
new THREE.Vector3(1, 0, 0),
deltaMove.y * rotationSpeed,
);
camera.position.applyMatrix4(rotationMatrix);
camera.lookAt(0, 0, 0);
previousMousePosition = { x: e.clientX, y: e.clientY };
}
});
document.addEventListener("mouseup", () => {
isDragging = false;
});
// Scroll to zoom
document.addEventListener("wheel", (e) => {
const zoomSpeed = 0.1;
const distance = Math.sqrt(
camera.position.x * camera.position.x +
camera.position.z * camera.position.z,
);
const direction = new THREE.Vector3(
camera.position.x / distance,
camera.position.y / distance,
camera.position.z / distance,
);
if (e.deltaY > 0) {
// Zoom out
camera.position.x += direction.x * zoomSpeed * 10;
camera.position.y += direction.y * zoomSpeed * 10;
camera.position.z += direction.z * zoomSpeed * 10;
} else {
// Zoom in
camera.position.x -= direction.x * zoomSpeed * 10;
camera.position.y -= direction.y * zoomSpeed * 10;
camera.position.z -= direction.z * zoomSpeed * 10;
}
// Limit minimum and maximum zoom
const newDistance = Math.sqrt(
camera.position.x * camera.position.x +
camera.position.y * camera.position.y +
camera.position.z * camera.position.z,
);
if (newDistance < 50) {
camera.position.x = direction.x * 50;
camera.position.y = direction.y * 50;
camera.position.z = direction.z * 50;
} else if (newDistance > 400) {
camera.position.x = direction.x * 400;
camera.position.y = direction.y * 400;
camera.position.z = direction.z * 400;
}
camera.lookAt(0, 0, 0);
});
// Keyboard controls for camera movement
document.addEventListener("keydown", (e) => {
const moveSpeed = 5;
autoRotate = false;
switch (e.key) {
case "ArrowUp":
camera.position.y += moveSpeed;
break;
case "ArrowDown":
camera.position.y -= moveSpeed;
break;
case "ArrowLeft":
camera.position.x -= moveSpeed;
break;
case "ArrowRight":
camera.position.x += moveSpeed;
break;
}
camera.lookAt(0, 0, 0);
});
// Handle window resize
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
}
// Update vehicles
function updateVehicles(deltaTime) {
vehiclesGroup.children.forEach((vehicle) => {
const { speed, onXStreet } = vehicle.userData;
// Move vehicle based on its direction
if (onXStreet) {
// Vehicle is traveling along X axis
if (vehicle.rotation.y === 0) {
// Moving in positive X direction
vehicle.position.x += speed * deltaTime;
// If reached edge of map, turn around
if (vehicle.position.x > 190) {
vehicle.rotation.y = Math.PI;
}
} else {
// Moving in negative X direction
vehicle.position.x -= speed * deltaTime;
// If reached edge of map, turn around
if (vehicle.position.x < -190) {
vehicle.rotation.y = 0;
}
}
} else {
// Vehicle is traveling along Z axis
if (vehicle.rotation.y === Math.PI / 2) {
// Moving in positive Z direction
vehicle.position.z += speed * deltaTime;
// If reached edge of map, turn around
if (vehicle.position.z > 190) {
vehicle.rotation.y = -Math.PI / 2;
}
} else {
// Moving in negative Z direction
vehicle.position.z -= speed * deltaTime;
// If reached edge of map, turn around
if (vehicle.position.z < -190) {
vehicle.rotation.y = Math.PI / 2;
}
}
}
// Animate wheels (optional)
vehicle.children.forEach((child) => {
if (
child.geometry &&
child.geometry.type === "CylinderGeometry" &&
child.geometry.parameters.radiusTop === 0.5
) {
child.rotation.x += speed * 0.1;
}
});
});
}
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Get delta time for smooth animation regardless of frame rate
const deltaTime = clock.getDelta();
// Update vehicles
updateVehicles(deltaTime);
// Auto rotate camera if enabled
if (autoRotate) {
const radius = Math.sqrt(
camera.position.x * camera.position.x +
camera.position.z * camera.position.z,
);
camera.position.x =
Math.cos(cameraRotationSpeed) * camera.position.x -
Math.sin(cameraRotationSpeed) * camera.position.z;
camera.position.z =
Math.sin(cameraRotationSpeed) * camera.position.x +
Math.cos(cameraRotationSpeed) * camera.position.z;
camera.lookAt(0, 0, 0);
}
// Render scene
renderer.render(scene, camera);
}
// Start the application
init();
</script>
</body>
</html>Deepseek r1 的输出
<!DOCTYPE html>
<html>
<head>
<title>3D Metropolitan City</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
let scene, camera, renderer, city;
let dayCycle = true;
let lights = [];
function init() {
// Create scene
scene = new THREE.Scene();
// Create camera
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 50, 100);
// Create renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x87CEEB);
document.body.appendChild(renderer.domElement);
// Create city
createCity();
// Add lights
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(0, 100, 0);
scene.add(directionalLight);
// Add event listeners
window.addEventListener('resize', onWindowResize, false);
window.addEventListener('click', toggleDayCycle, false);
}
function createCity() {
city = new THREE.Group();
// Create buildings
const buildingGeometry = new THREE.BoxGeometry(5, 1, 5);
for(let x = -50; x < 50; x += 10) {
for(let z = -50; z < 50; z += 10) {
if(Math.random() > 0.3) {
const height = Math.random() * 30 + 10;
const building = new THREE.Mesh(
buildingGeometry,
new THREE.MeshPhongMaterial({
color: new THREE.Color(Math.random(), Math.random(), Math.random()),
transparent: true,
opacity: 0.8
})
);
building.scale.y = height;
building.position.set(x, height/2, z);
city.add(building);
}
}
}
// Create roads
const roadGeometry = new THREE.PlaneGeometry(100, 5);
const roadMaterial = new THREE.MeshPhongMaterial({ color: 0x444444 });
for(let z = -45; z <= 45; z += 10) {
const road = new THREE.Mesh(roadGeometry, roadMaterial);
road.rotation.x = -Math.PI / 2;
road.position.y = 0.1;
road.position.z = z;
city.add(road);
}
scene.add(city);
}
function animate() {
requestAnimationFrame(animate);
// Rotate camera around city
const time = Date.now() * 0.001;
camera.position.x = Math.cos(time * 0.3) * 100;
camera.position.z = Math.sin(time * 0.3) * 100;
camera.lookAt(scene.position);
// Update day/night cycle
if(dayCycle) {
renderer.setClearColor(new THREE.Color().setHSL(
(Math.sin(time * 0.2) + 1) / 2, 0.5, 0.3
));
}
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function toggleDayCycle() {
dayCycle = !dayCycle;
renderer.setClearColor(dayCycle ? 0x87CEEB : 0x000000);
}
init();
animate();
</script>
</body>
</html>我认为这里不应该有任何疑虑。克劳德在这里击败了 Deepseek r1。
编码能力总结
Claude 3.7 Sonnet 的编码能力毫无疑问优于 Deepseek r1；无论是 Python 还是 3 代码，Claude 都远远领先于 Deepseek r1。这并不奇怪，因为 Anthropic 明确提高了 Claude 的编码能力。
写作
我广泛使用过这两种模型。Claude 在专业写作方面表现更好，尤其是技术方面。Deepseek r1 非常有创意，而且更人性化。在撰写论文或解释任何技术概念时，Claude 表现突出，而如果你想与他们交谈，Deepseek r1 则更好。
最终裁决
•对于推理和数学，Claude 感觉更加结构化和成熟。
•Deepseek r1 的语气不太专业，但足以应付大多数实际任务。
•Claude 3.7 Sonnet 是目前最好的编码模型。它比其他模型编写代码更快、更好、更透明。
•Claude 更擅长技术写作。然而，Deepseek 的语气和方法更人性化。